vue3中el-cascader怎么显示后端返回的集合
时间: 2024-02-17 15:04:34 浏览: 34
在Vue3中,你可以使用`v-model`绑定一个变量来控制`el-cascader`选中的值。如果你的后端返回的集合是一个数组,你可以把这个数组赋值给`v-model`绑定的变量,这样`el-cascader`就会自动更新显示。以下是一个示例代码:
```html
<el-cascader
v-model="selectedValues"
:options="options"
:props="props">
</el-cascader>
```
```javascript
export default {
data() {
return {
selectedValues: [], // 选中的值
options: [ // 级联选择器的选项
{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则',
children: [{
value: 'yizhi',
label: '一致'
}, {
value: 'fankui',
label: '反馈'
}]
}]
}
],
props: { // 配置选项的属性
value: 'value',
label: 'label',
children: 'children'
}
}
},
mounted() {
// 从后端获取数据
this.$http.get('/api/cascader').then(res => {
this.selectedValues = res.data; // 把后端返回的值赋给v-model绑定的变量
});
}
};
```
在这个示例中,我们把后端返回的选中的值赋给了`selectedValues`变量,这个变量绑定到了`el-cascader`的`v-model`上,因此`el-cascader`会自动显示后端返回的选中的值。