vue Element 利用Cascader 级联选择器实现三层选择器

vue Element 利用Cascader 级联选择器实现三层选择器

vue Element 利用Cascader 级联选择器实现三层选择器

在这次项目需求中要实现的功能和选择地址的过程是很相似的，就用选择地址的过程来举例：首先是选择省，然后是市，再是某个区。在实际的开发过程中这种场景是很常见的，所以我就分享一下我的实现过程。

效果图

实现过程

实现这个功能需要用到Element这个框架中的Cascader 级联选择器，但是不是那个Cascader 级联选择器都适用于这种场景，其中我选择了Cascader 级联选择器中的动态加载选择器，链接 --> 添加链接描述
这个选择器的好处就像你看到的那样它可以：动态加载，这也就意味着可以把我们的数据动态的接入到选择器当中，体验就很好。

代码

HTML:

<el-cascader
  ref="cascader"
  :props="casProps"
  style="width:300px"
  filterable
  :options="projectAllList"
  clearable
  @change="handleChange">
</el-cascader>

JS:

data () {
    return {
      projectAllList: [{
        projectId: '',
        projectName: '',
        name:''
      }],
      casProps: {
        value: 'projectId',
        label: 'projectName',
        lazy: true, // 此处必须为true
        lazyLoad: (node, resolve) => {
          if (node.data.projectId && node.level == 1)   this.getChildProject(node.data, resolve) //node指的是当前点击的节点，通过判断node.level的数值来确定需要触发的事件，和需要请求的接口。在这里就是当点击的当前节点为第一层时就触发getChildProject这个事件
          if (node.data.projectId && node.level == 2) this.getChildProjectname(node.data, resolve)//同上
        }
      },
     }
    }

  methods: {
    handleChange (value) {
      if (value.length > 0) {
        // 获取当前选中节点
        let checkNode = this.$refs['cascader'].getCheckedNodes()
        // 将当前选中节点数据和当前路径数组返回给父组件
        this.$emit('getData', checkNode[0].data, checkNode[0].pathLabels)
      } else {
        this.$emit('getData', {}, [])
      }
    },
    // 获取第一层数据
    getProjectList () {
      const params = {
        currentPage: 1,
        pageSize: 999
      }
      this.$api.getAdmin_RegionList(params).then((res) => {
        if (res.code == 200) {
          const list = res.data.list
          this.projectAllList = list.map(el => {
            return {
              projectId: el.id,
              projectName: el.name,
              leaf: false  //这个变量很重要，是用于决定是否结束选择的，当设置为false时则是选择加载下一层
            }
          })
        } else {
          this.$notify({
            title: '提示',
            message: res.message || '获取区域列表失败',
            offset: 80,
            type: 'error'
          })
        }
      })
    },
     // 获取二层数据
    getChildProject (data, resolve) {
      let params = {
        currentPage: 1,
        pageSize: 999,
        id: data.projectId
      }
      this.childProjects = []
      this.$api.getGridList(params).then(res => {
        if (res.code == 200) {
          const list = res.data.list
          let childProjects = list.map(el => {
            return {
              projectId: el.id,
              projectName: el.name,
              leaf: false// 设置为false时则是选择加载下一层
            }
          })
          // 将childProjects渲染到第二层的选择器例
          resolve(childProjects)
        } else {
          this.listLoading = false
          this.$notify({
            title: '提示',
            message: res.message || '获取网格列表失败',
            offset: 80,
            type: 'error'
          })
        }
      }).catch(error => {
        // 此处调用resolve 防止接口数据异常时级联选择器一直处于加载状态
        resolve(childProjects)
      })
    },
    // 获取三层数据
       略（记住设置leaf: true即可在第三层结束选择，不进行下一层的加载）
  }

vue Element 利用Cascader 级联选择器实现三层选择器相关教程

1. nginx部署多个vue项目如何配置
   

   nginx部署多个vue项目如何配置 使用同一域名或者ip去部署访问多个前端项目，比如域名/ip直接访问官网，域名/ip后面带路径去访问其它项目 官网访问地址: http://192.168.27.119/login项目二访问地址：http://192.168.27.119/biz/login项目三访问地址：http://1

2. 在 vue 中使用 echarts 的详细步骤
   

   在 vue 中使用 echarts 的详细步骤 年龄大了，果然脑力是跟不上了，这个图表已经用过几次了，每次还是或多或少的出现问题，现在把 echarts 在 vue 中的详细使用步骤记录下来，以备不时之需吧。 echarts 图表绘制的思路是： 1 获取一个有宽高的 DOM 元素 -- 2

3. Jenkins + Maven + Github/Gitlab + Springboot/Vue.js 实现自动
   

   Jenkins + Maven + Github/Gitlab + Springboot/Vue.js 实现自动化部署 Jenkins用户文档地址 Jenkins在docker环境下安装非常简单。只需要执行命令 docker run \ -u root \ --rm \ -d \ -p 8080:8080 \ -p 50000:50000 \ -v jenkins-data:/var/jenkins_home \

4. VuePress 侧边栏使用详解
   

   VuePress 侧边栏使用详解 前言 官网写的侧边栏教程真的是让人很糟心，经过一番摸索，总算大致弄清楚了，下面详细说一下用法： 目录结构： docs根目录下有一个README.md、chinese文件夹、english文件夹 最简侧边栏： sidebar: { '/language/chinese/': [ '', /

5. Vue 页面加载进度条nprogress的使用
   

   Vue 页面加载进度条nprogress的使用 前言：客户在访问网页的时候想要看到网页加载的进度，所以使用 nprogress 来实现当页面跳转是出现在浏览器顶部的进度条，它是轻量级的进度条组件，使用简便，可以很方便集成到应用中来。 效果： 一、参考资料 官网：https:

6. vue 京东购物车实例 filter 、foreach、every、reduce --重学vue
   

   vue 京东购物车实例 filter 、foreach、every、reduce --重学vue.js笔记(13) 效果图 点击快速查看 1.初始静态布局源码： 2.最终代码 关键方法解析 filter foreach every reduce splice 1.初始静态布局源码： !DOCTYPE htmlhtmlheadmeta charset=utf-8 /meta n

7. Vue 计算属性set和get
   

   Vue 计算属性set和get template div class=hello 测试1：input type=text v-model=demoData1 测试2：input type=text v-model=demoData2 测试3：input type=text v-model=demoData3 /div/templatescriptexport default { name: 'HelloWorld', computed: { dem

8. 记录Ant-Vue-table中customCell改变单元格样式
   

   记录Ant-Vue-table中customCell改变单元格样式 Ant-Design-Vue table中使用customCell改变单元格样式 自己记录一下自己对 customCell 的使用 在ant-design-vue中的table中突然有了个根据某种规则把那个单个数据 标红 的业务需求 官方文档中： 在官方中的引用