Element-ui: el-cascader 单选回显
时间: 2023-08-24 16:09:31 浏览: 274
要实现 el-cascader 的单选回显,你可以使用 v-model 绑定一个变量来保存选择的值,并且在初始化时给这个变量赋初值。
首先,在你的 Vue 组件中添加一个变量来保存选择的值,比如 `selectedValue`:
```javascript
data() {
return {
selectedValue: [], // 用于保存选择的值
};
},
```
然后,在 el-cascader 上使用 v-model 将这个变量与组件绑定:
```html
<el-cascader v-model="selectedValue" :options="options"></el-cascader>
```
其中 `options` 是你传入的数据源配置。
接下来,你可以根据需要在初始化时给 `selectedValue` 赋初值。如果你有一个初始的选中值,你可以将其赋给 `selectedValue`,这样组件就会自动回显选中的值。
例如,如果初始的选中值是 `[1, 2, 3]`,那么在组件的 `mounted` 钩子函数中给 `selectedValue` 赋初值:
```javascript
mounted() {
this.selectedValue = [1, 2, 3]; // 初始选中值
},
```
这样 el-cascader 就会根据 `selectedValue` 的值进行回显了。
注意:el-cascader 的数据源配置 `options` 需要符合一定的格式要求,你需要根据实际情况进行配置。详细的配置说明可以参考 Element UI 官方文档。
阅读全文