背景：在业务逻辑中需要用到el-cascader级联选择器懒加载+多选功能，在回显的过程中遇到了无法回显的情况，按网上方法排查了回显值格式等问题终究没有解决。
解决方案：使用el-cascader-plus进行实现级联选择器懒加载+多选+回显功能
第一步：安装el-cascader-plus
npm i el-cascader-plus --save
第二步：使用el-cascader-plus
如需全局使用就在 main.js 中添加以下代码
import elCascaderPlus from "el-cascader-plus";
Vue.use(elCascaderPlus);
在组件中单独使用在文件内添加以下代码
import elCascaderPlus from "el-cascader-plus";
export default {
name: "demo",
components: {
elCascaderPlus,
},
};
亲测完整代码示例
html
<template>
<div class="demo">
<el-cascader-plus v-model="value" :props="nodeprop"></el-cascader-plus>
</div>
</template>
<script>
import elCascaderPlus from "el-cascader-plus";
export default {
name: "demo",
components: {
elCascaderPlus,
},
data() {
return {
nodeprop: {
lazy: true,
multiple: true,
lazyLoad: this.lazyLoads,
leaf: "leaf"
},
}
}
methods: {
async lazyLoads(node, resolve) {
if (node.level == 0) {
let res = await this.getOther(0);//请求接口获取一级数据
resolve(res);
} else {
let res = await this.getOther(node.value);//请求接口获取子级数据
setTimeout(() => {
resolve(res);
}, 200);
}
},
}
};
</script>
官方完整代码示例
<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>