el-cascader保存之后数据回显
时间: 2023-07-22 17:27:13 浏览: 153
在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组件中。
阅读全文
相关推荐
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)