elementUi Cascader 级联选择器调用内部方法设置多选
时间: 2024-03-25 09:42:01 浏览: 146
ele-multi-cascader:ElementUI-based 多选级联选择器
5星 · 资源好评率100%
在 Element UI Cascader 组件中,可以通过调用内部方法来设置多选。具体步骤如下:
1. 首先在 template 中将 multiple 属性设置为 true,表示启用多选功能。
```
<el-cascader
v-model="selectedOptions"
:options="options"
:props="cascaderProps"
:multiple="true"
/>
```
2. 在 script 中,可以通过 $refs 获取到 Cascader 组件的实例,然后调用其 setCheckedNodes 方法来设置多选的选中项。
```
export default {
data() {
return {
selectedOptions: [], // 选中的项
options: [...] // Cascader 组件的选项
}
},
methods: {
// 设置多选的选中项
setSelectedOptions() {
const cascader = this.$refs.cascader
cascader.setCheckedNodes(this.selectedOptions)
}
}
}
```
注意:在调用 setCheckedNodes 方法之前,需要确保 Cascader 组件已经渲染完成,并且需要将选中的项赋值给 selectedOptions 数组。可以在 mounted 钩子函数中调用 setSelectedOptions 方法来确保组件已经渲染完成。
```
mounted() {
this.setSelectedOptions()
}
```
阅读全文