element ui 级联选择组件(Cascader)懒加载(lazy)

级联选择组件(Cascader)懒加载(lazy)

为解决数据量过大时，级联选择组件导致的页面卡死问题

后端返回了3000条数据，并且未整理成层级模式

主要实现的效果是省市区级联选择，并且可以在任意一个层级选择，省市区数据显示懒加载

具体代码如下

<el-cascader
    class="cascader"
    ref="myCascader"
    v-model="areaCode"
    clearable
    placeholder="请选择查询区域"
    :props="caprops"
    @change="handleChange"
    :show-all-levels="false"
>
</el-cascader>

export default {
data () {
    return {
      caprops: {
         value:'code', // 点击获取的值的字段名
         checkStrictly: true,
         lazy: true,
         lazyLoad: this.layzesss
      },
   }
}
methods: {
 async layzesss(node,resolve) {
  let level = node.level // 当前层级 三层的为 0，1，2
  let result = []
  switch (level) {
    case 0:
    // 这里是由于后端返回的所有的数据，对返回的数据进行了筛选this.firstLevel 是第一层数据，也可换成相关接口
    result =  this.firstLevel 
      break;
    case 1:
    // 取出当前选择的节点的value值
      let firstParams = node.value
       result = this._.filter(this.secondLevel,['parentcode', firstParams]) // this.secondLevel 是第二层数据
      break;
    case 2:
      let secondParams  = node.value
        result = this._.filter(this.thirdLevel,['parentcode', secondParams ]) //this.thirdLevel 第三层数据
      break;
    default:
      result= []
      break;
	}
   resolve(result);
 },
}

效果展示
第一层

第二层

第三层

选中效果

备注
如果仍然存在卡死现象，可更新浏览器试试，有可能是浏览器的原因