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…
优化点:
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);
在组件中单独使用
import elCascaderPlus from "el-cascader-plus";
export default {
name: "demo",
components: {
elCascaderPlus,
},
};
代码示例
el-cascader-plus
el-cascader-plus单选
el-cascader-plus单选不关联
el-cascader-plus多选
el-cascader-plus多选不关联
el-cascader-plus懒加载单选
el-cascader-plus懒加载单选不关联
el-cascader-plus懒加载多选
el-cascader-plus懒加载多选不关联
el-cascader-plus懒加载设置maxLevel为1