el-cascader保存之后数据回显
时间: 2023-07-22 17:27:13 浏览: 146
使用element中el-cascader级联选择器:实现省市区街道筛选、动态懒加载以及回显
在el-cascader中,当我们选择完所有级联选项后,需要将选择的数据保存下来并回显到页面上。可以通过以下步骤实现数据的保存和回显:
1. 在el-cascader中绑定一个v-model,用于保存用户选中的数据,例如:
```
<el-cascader v-model="selectedOptions" :options="options"></el-cascader>
```
2. 在组件中定义selectedOptions变量,并初始化为空数组:
```
data() {
return {
selectedOptions: []
}
}
```
3. 在el-cascader组件中添加@change事件,该事件会在用户选择完所有级联选项后触发,并将选择的数据保存到selectedOptions中:
```
<el-cascader v-model="selectedOptions" :options="options" @change="handleCascaderChange"></el-cascader>
methods: {
handleCascaderChange: function (value) {
this.selectedOptions = value;
}
}
```
4. 在页面中回显保存的数据,可以将selectedOptions绑定到另一个el-cascader组件中的v-model中:
```
<el-cascader v-model="selectedOptions" :options="options"></el-cascader>
```
这样,当用户再次打开页面时,选择的数据就会回显到el-cascader组件中。
阅读全文