在 Vue 中实现级联选择器(Cascader)的回显,通常我们会用到 Element UI 或其他 UI 框架提供的现成组件,但如果要原生实现,你需要自己处理数据结构以及选中状态的回显。以下是一个简单的示例:
首先,我们需要一个级联数据结构:
javascript
data() {
return {
options: [
{
value: 'value1',
label: 'label1',
children: [
{
value: 'value1-1',
label: 'label1-1'
},
{
value: 'value1-2',
label: 'label1-2'
}
]
},
// 更多选项...
],
selectedValues: ['value1', 'value1-1'] // 这是需要回显的选中值
}
}
然后在模板中遍历并判断当前项是否选中:
```html
```
样式部分(例如给选中的项添加active样式):
css
.active {
color: blue;
}
这样当 selectedValues
中包含某一项的值时,该项就会被标记为选中状态。
注意:这个示例非常基础,没有考虑交互逻辑(如点击展开子级、动态加载等),实际项目中可能需要更复杂的实现。同时,对于多级联动的情况,还需要进一步处理 selectedValues
的更新逻辑。