avue 级联选择器 回显
时间: 2023-09-23 20:10:33 浏览: 163
详解关于element级联选择器数据回显问题
avue级联选择器的回显需要在数据源中设置对应的值,然后将该值绑定到组件的v-model上。例如:
```html
<avue-cascader v-model="selectedValue" :options="options"></avue-cascader>
```
```javascript
data() {
return {
selectedValue: ['shanghai', 'minhang', 'qibao'], // 设置选中的值
options: [
{
value: 'beijing',
label: '北京',
children: [
{
value: 'haidian',
label: '海淀',
children: [
{
value: 'wudaokou',
label: '五道口'
},
{
value: 'zhongguancun',
label: '中关村'
}
]
},
{
value: 'chaoyang',
label: '朝阳',
children: [
{
value: 'sanlitun',
label: '三里屯'
}
]
}
]
},
{
value: 'shanghai',
label: '上海',
children: [
{
value: 'minhang',
label: '闵行',
children: [
{
value: 'qibao',
label: '七宝'
},
{
value: 'xinzhuang',
label: '莘庄'
}
]
},
{
value: 'pudong',
label: '浦东',
children: [
{
value: 'lujiazui',
label: '陆家嘴'
}
]
}
]
}
]
}
}
```
这样,当页面加载时,avue级联选择器就会默认选中 `['shanghai', 'minhang', 'qibao']` 这个选项。
阅读全文