共计 6306 个字符，预计需要花费 16 分钟才能阅读完成。
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,},
};
代码示例
<template>
<div class="demo">
<div class="mg20 title">el-cascader-plus</div>
<div class="mg20">
<div class="mg20">el-cascader-plus 单选 </div>
<el-cascader-plus
style="width: 400px"
ref="cascader"
v-model="value"
@change="change"
:options="options"
></el-cascader-plus>
</div>
<div class="mg20">
<div class="mg20">el-cascader-plus 单选不关联 </div>
<el-cascader-plus
style="width: 400px"
ref="cascader"
v-model="value1"
:props="{checkStrictly: true}"
@change="change"
:options="options"
></el-cascader-plus>
</div>
<div class="mg20">
<div class="mg20">el-cascader-plus 多选 </div>
<el-cascader-plus
style="width: 400px"
ref="cascader"
v-model="multipleValue"
:props="{multiple: true}"
@change="change"
:options="options"
></el-cascader-plus>
</div>
<div class="mg20">
<div class="mg20">el-cascader-plus 多选不关联 </div>
<el-cascader-plus
style="width: 400px"
ref="cascader"
v-model="multipleValue1"
:props="{multiple: true, checkStrictly: true}"
@change="change"
:options="options"
></el-cascader-plus>
</div>
<div class="mg20">
<div class="mg20">el-cascader-plus 懒加载单选 </div>
<el-cascader-plus
style="width: 400px"
ref="cascader"
v-model="value"
:props="props"
@change="change"
></el-cascader-plus>
</div>
<div class="mg20">
<div class="mg20">el-cascader-plus 懒加载单选不关联 </div>
<el-cascader-plus
style="width: 400px"
ref="cascader"
v-model="value1"
:props="{...props, checkStrictly: true}"
@change="change"
></el-cascader-plus>
</div>
<div class="mg20">
<div class="mg20">el-cascader-plus 懒加载多选 </div>
<el-cascader-plus
style="width: 400px"
ref="cascader"
v-model="multipleValue"
:props="{...props, multiple: true}"
@change="change"
></el-cascader-plus>
</div>
<div class="mg20">
<div class="mg20">el-cascader-plus 懒加载多选不关联 </div>
<el-cascader-plus
style="width: 400px"
ref="cascader"
v-model="multipleValue1"
:props="{...props, multiple: true, checkStrictly: true}"
@change="change"
></el-cascader-plus>
</div>
<div class="mg20">
<div class="mg20">el-cascader-plus 懒加载设置 maxLevel 为 1 </div>
<el-cascader-plus
:maxLevel="1"
style="width: 400px"
v-model="value2"
:props="props"
></el-cascader-plus>
</div>
</div>
</template>
<script>
import elCascaderPlus from "el-cascader-plus";
export default {
name: "demo",
components: {elCascaderPlus,},
data() {
return {res: [],
// 级联懒加载
props: {
multiple: false,
lazy: true,
lazyLoad: this.getNode,
},
value: [17, 18, 19],
value1: [17, 18, 19],
value2: [],
multipleValue: [[17, 18, 19]],
multipleValue1: [[17, 18, 19]],
options: [
{
value: 1,
label: "西北",
children: [
{
value: 2,
label: "上海",
children: [
{
value: 3,
label: "普陀",
leaf: true,
},
{
value: 4,
label: "黄埔",
leaf: true,
},
{
value: 5,
label: "徐汇",
leaf: true,
},
],
},
{
value: 7,
label: "江苏",
children: [
{
value: 8,
label: "南京",
leaf: true,
},
{
value: 9,
label: "苏州",
leaf: true,
},
{
value: 10,
label: "无锡",
leaf: true,
},
],
},
{
value: 12,
label: "浙江",
children: [
{
value: 13,
label: "杭州",
leaf: true,
},
{
value: 14,
label: "宁波",
leaf: true,
},
{
value: 15,
label: "嘉兴",
leaf: true,
},
],
},
],
},
{
value: 17,
label: "东南",
children: [
{
value: 18,
label: "陕西",
children: [
{
value: 19,
label: "西安",
leaf: true,
},
{
value: 20,
label: "延安",
leaf: true,
},
],
},
{
value: 21,
label: "新疆维吾尔族自治区",
children: [
{
value: 22,
label: "乌鲁木齐",
leaf: true,
},
{
value: 23,
label: "克拉玛依",
leaf: true,
},
],
},
],
},
],
};
},
watch: {},
methods: {change(e) {console.log(e);
},
// 获取以后点击节点的子 node, 依据 node 数据和后端交互，此处为模仿后端申请
async getNode(node, resolve) {
const {
level, // 层级
value,
data,
} = node;
// 模仿后端申请
// 0 级解决
if (level == 0) {let options = JSON.parse(JSON.stringify(this.options));
let nodes = options.map((v, index) => {
delete v.children;
return {...v,};
});
setTimeout(() => resolve(nodes), 500);
} else {this.res = [];
let options = JSON.parse(JSON.stringify(this.options));
for (let i = 0; i < options.length; i++) {this.findChildren(options[i], value);
}
// 去除子集的 children
let nodes = [];
if (this.res.length) {nodes = this.res.map((v, index) => {
delete v.children;
return {...v,};
});
}
setTimeout(() => resolve(nodes), 500);
}
},
// 找到某个树节点并返回子集
findChildren(item, cid, flag = false) {if (item.value == cid) {flag = true;}
if (flag && item.children && item.children.length) {this.res = [];
this.res = item.children;
}
if (!item.children) {return;} else {item.children.forEach((child) => {this.findChildren(child, cid, false);
});
}
},
},
};
</script>
<style>
.mg20 {margin-top: 20px;}
.title {
font-weight: bold;
font-size: 26px;
}
</style>
正文完