el-cascader多选回显
时间: 2023-05-20 16:01:01 浏览: 495
对于el-cascader多选回显的问题,您可以通过以下代码实现:
<template>
<el-cascader
v-model="selectedOptions"
:options="options"
:props="props"
@change="handleChange"
clearable
filterable
multiple
collapse-tags
placeholder="请选择"
/>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
options: [
{
value: "zhinan",
label: "指南",
children: [
{
value: "shejiyuanze",
label: "设计原则",
children: [
{
value: "yizhi",
label: "一致"
},
{
value: "fankui",
label: "反馈"
},
{
value: "xiaolv",
label: "效率"
},
{
value: "kekong",
label: "可控"
}
]
},
{
value: "daohang",
label: "导航",
children: [
{
value: "cexiangdaohang",
label: "侧向导航"
},
{
value: "dingbudaohang",
label: "顶部导航"
}
]
}
]
}
],
props: {
multiple: true,
checkStrictly: true,
value: "value",
label: "label",
children: "children"
}
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
};
</script>
这段代码实现了一个多选的el-cascader组件,并且可以回显已选中的选项。
阅读全文