el-cascader联级多选的反显
时间: 2023-07-22 20:17:20 浏览: 80
使用element中el-cascader级联选择器:实现省市区街道筛选、动态懒加载以及回显
el-cascader联级多选的反显可以通过设置`v-model`的值为一个数组来实现。数组中的每个元素代表一个选中的节点,每个元素包含该节点的 value 属性和 label 属性。例如:
```html
<template>
<el-cascader
v-model="selectedItems"
:options="options"
:props="props"
:show-all-levels="false"
:clearable="true"
:change-on-select="true"
:expand-trigger="hover"
:multiple="true"
></el-cascader>
</template>
<script>
export default {
data() {
return {
selectedItems: [
{ value: '110000', label: '北京市' },
{ value: '110100', label: '北京市' },
{ value: '110101', label: '东城区' }
],
options: [
{
value: '110000',
label: '北京市',
children: [
{
value: '110100',
label: '北京市',
children: [
{
value: '110101',
label: '东城区'
},
{
value: '110102',
label: '西城区'
},
{
value: '110105',
label: '朝阳区'
},
// ...
]
}
]
}
],
props: {
value: 'value',
label: 'label',
children: 'children'
}
};
}
};
</script>
```
在上面的示例中,`selectedItems`数组中包含了三个节点,分别对应“北京市”、“北京市”的“东城区”,这三个节点都被选中了。当组件初始化后,会自动根据`selectedItems`数组中的值进行反显,将对应的节点选中。如果`selectedItems`数组中的值发生了变化,组件会自动更新选中状态。
阅读全文