element-ui el-cascader 数据回显
时间: 2023-11-13 07:58:09 浏览: 175
基于Vue2+element-ui+AntV X6实现的流程图编辑器
在 element-ui 的 el-cascader 中,可以通过 v-model 绑定选中的值,然后在选中值发生变化时触发 @change 事件,将选中的值保存到数据中,再在初始化时将数据中保存的值赋给 v-model 即可实现数据回显。
具体实现步骤如下:
1. 在 data 中定义一个变量,用于保存选中的值。
```
data() {
return {
selectedValue: []
}
}
```
2. 在 el-cascader 中使用 v-model 绑定选中的值,并在 @change 事件中将选中的值保存到 selectedValue 中。
```
<el-cascader
v-model="selectedValue"
:options="options"
@change="handleChange"
></el-cascader>
methods: {
handleChange(value) {
this.selectedValue = value;
}
}
```
3. 在初始化时将 selectedValue 赋给 v-model。
```
<el-cascader
v-model="selectedValue"
:options="options"
@change="handleChange"
></el-cascader>
mounted() {
this.selectedValue = [1, 2, 3];
}
```
阅读全文