旧版本的elementui的级联选择器并不支持多选,怎么用旧版本的elementui实现级联选择器的多选
时间: 2023-08-19 16:05:56 浏览: 99
基于freeRTOS和STM32F103x的手机远程控制浴室温度系统设计源码
如果你使用的是旧版本的Element UI,可以通过以下步骤实现级联选择器的多选功能:
1. 在el-cascader组件上添加multiple属性,开启多选功能。
2. 在el-cascader组件上添加filterable属性,开启搜索功能。
3. 在el-cascader组件的change事件中,更新选中的值。
4. 在el-cascader组件上添加clearable属性,开启清空已选项功能。
下面是一个简单的实现示例代码:
```html
<el-cascader
:options="options"
v-model="selectedOptions"
:props="{ multiple: true, filterable: true, clearable: true }"
@change="handleCascaderChange"
/>
```
```javascript
data() {
return {
options: [
{
value: 'zhinan',
label: '指南',
children: [
{
value: 'shejiyuanze',
label: '设计原则',
children: [
{
value: 'yizhi',
label: '一致'
},
{
value: 'fankui',
label: '反馈'
}
]
},
{
value: 'daohang',
label: '导航',
children: [
{
value: 'cexiangdaohang',
label: '侧向导航'
},
{
value: 'dingbudaohang',
label: '顶部导航'
}
]
}
]
}
],
selectedOptions: []
}
},
methods: {
handleCascaderChange(value) {
this.selectedOptions = value
}
}
```
在上述示例代码中,我们为el-cascader组件添加了multiple、filterable和clearable属性,并在change事件中更新选中的值。通过这种方式,我们就可以实现旧版本的Element UI级联选择器的多选功能。
阅读全文