修复element ui级联懒加载问题，二次封装成el-cascader-plus_带搜索懒加载的的地址级联组件-CSDN博客

本文链接：https://blog.csdn.net/qq_43729052/article/details/129171927

el-cascader-plus

经常碰到懒加载不回显的问题，使用起来很不方便，于是花了些时间二次开发了这个组件，下次遇到同样问题就能直接解决，在此开源出来，希望对遇到相同问题的人有帮助。开源互助使程序的世界更美好！

el-cascader-plus基于 element-ui 级联二次封装，弥补了原 element-ui 级联组件懒加载经常无法回显的不足，用法与原级联组件一致。

使用前请确保安装了 vue 和 element ui （或者已单独按需引入 element ui 的级联 Cascader）

版本推荐 "vue": "^2.6.11","element-ui": "^2.15.13",

配置参数同 ElementUI 的 Cascader 级联选择器，可参考其文档ElementUI 官方文档

新增的属性

参数	说明	类型	可选值	默认值
maxLevel	懒加载最大层级，最小值0	Number	整数	1000

git仓库https://github.com/fatelyh/el-cascader-plus

优化点：

1、修复原组件懒加载单选数据加载延迟的情况下不响应数据变动、不触发回显的问题 2、修复原组件懒加载多选不响应数据变动、不触发回显的问题 3、单选懒加载做了回显速度优化，比原组件单选懒加载回显速度会快一些 4、新增一个prop属性：maxLevel,可限制懒加载最大层级，整数，最小值0,默认值1000 5、props中的lazyLoad在原基础上对resolve做了一点小修改。


      props{
   
   
        lazy:true,
        lazyLoad:this.getNode
      }

      getNode(node, resolve) {
   
   
     //根据node获取子集操作
      resolve(params)
     // 其中params可为普通数据和promise(要有resolve值)
   }

效果预览

install 安装


npm i el-cascader-plus --save

使用

在 main.js 中写入下面的代码就可以全局使用


import elCascaderPlus from "el-cascader-plus";

Vue.use(elCascaderPlus);

在组件中单独使用