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即可在第三层结束选择，不进行下一层的加载）
  }