el-cascader级联选择器单选/多选根据接口懒加载动态获取数据

在Vue项目中，使用elment ui 中 el-cascader 级联选择器，级联选择器每一级的内容对应不同的接口，因此我们要采用懒加载的形式实现对数据的动态获取。

主要思路：通过 lazy 开启动态懒加载，并使用 lazyLoad 来设置加载数据源的方法。lazyLoad 方法有两个参数，第一个参数 node 为当前点击的节点，第二个 resolve 为数据加载完成的回调(必须调用)。

以下先介绍el-cascader级联选择器单选根据接口懒加载动态获取数据

<template>
  <el-cascader
    ref="cascader"
    :props="casProps"
    :options="casData"
    filterable
    clearable
    placeholder="请选择"
    @change="handleCasChange">
  </el-cascader>
</template>
 
<script>
export default {
  name: 'cascaderTest',
  data () {
    return {
    // 获取数据
      casData: [],
      casProps: {
        value: 'casId',
        label: 'casName',
        // 懒加载
        lazy: true, // 必须为true
        lazyLoad:this.lazyLoad
      }
    }
  },
methods:{
	// 懒加载获取数据 
    lazyLoad(node,resolve){
        const level = node.level
        var url
        if (level === 0) {
          url = '接口地址'
        }
        if (level === 1) {
          url = '接口地址'
        }
        if (level === 2) {
          url = '接口地址'
        }
        // 请求看项目具体请求格式
        this.reqM1Service(url, '', "get")
        .then(res => {
          let data
          if (level === 0) {
            data = res.data.data
            // 判断data是否有数据
            if(data.length == 0){
              return this.$message.error("获取数据失败！")
              }else{
                data.forEach(item => {
                this.value = item.casId
                this.label = item.casName
            })
           }
          }
          if (level === 1) {
            data = res.data.data
            if(data.length == 0){
              return this.$message.error("获取数据失败！")
              }
            data.forEach(item => {
              item.value = item.casId
              item.label = item.casName
            })
          }
          if (level === 2) {
            data = res.data.data
            if(data.length == 0){
              return this.$message.error("获取数据失败！")
              }
            data.forEach(item => {
              item.value = item.casId
              item.label = item.casName
              //将相关值赋值到选择器上
              item.leaf = level >= 2
            })
          }
          resolve(data)
        })
      }
    }
}
</script>

多选的实现其实可以类比单选，但是注意要处理最后一个层级。因为多选不会自动关闭选择框，选择的内容会回显在选择框里，但是其最后一级的加载圈会一直在转，且控制台会报错。

因此el-cascader级联选择器多选根据接口懒加载动态获取数据在单选的基础上修改以下代码

casProps:{
        //允许多选
        multiple: true, 
        value: 'casId',
        label: 'casName',
        // 懒加载
        lazy: true, // 必须为true
        lazyLoad:this.lazyLoad
      },

		if (level === 0) {
          url = '接口地址'
        }
        if (level === 1) {
          url = '接口地址'
        }
        if (level === 2) {
          url = '接口地址'
        }
       // 新增对最后一级的下一级的处理
       // 到最后一级的时候消除加载圈及禁止继续请求
        if (level === 3) {
          let data
          resolve(data)
          return
        }
        

补充：element-ui Cascader 级联选择器清除选中及高亮

// 清空级联选择器选中状态
this.$refs.cascader.$refs.panel.clearCheckedNodes()
// 清除高亮
this.$refs.cascader.$refs.panel.activePath = []