el-cascader multiple:true , 输入框无法回显
时间: 2023-11-28 10:21:18 浏览: 164
在 `el-cascader` 的多选模式下,输入框无法回显的原因可能是因为你没有正确处理选中项的值。在多选模式下,`el-cascader` 组件会将选中的多个值组成一个数组,每个选中项都是一个对象,包含 `label` 和 `value` 两个属性。
要回显选中的值,你需要在初始化组件时,将选中的值设置为一个数组,数组中每个元素都是一个对象,包含 `label` 和 `value` 两个属性。具体实现可以参考以下示例代码:
```html
<template>
<el-cascader
v-model="selectedOptions"
:options="options"
:props="{
value: 'id',
label: 'name',
children: 'children'
}"
multiple
filterable
clearable
collapse-tags
@change="handleChange"
/>
</template>
<script>
export default {
data() {
return {
options: [
{
id: 1,
name: 'Option 1',
children: [
{
id: 11,
name: 'Option 1-1'
},
{
id: 12,
name: 'Option 1-2'
}
]
},
{
id: 2,
name: 'Option 2',
children: [
{
id: 21,
name: 'Option 2-1'
},
{
id: 22,
name: 'Option 2-2'
}
]
}
],
selectedOptions: [
{
label: 'Option 1-1',
value: 11
},
{
label: 'Option 2-2',
value: 22
}
]
}
},
methods: {
handleChange(selectedOptions) {
this.selectedOptions = selectedOptions
}
}
}
</script>
```
在上面的代码中,我们将 `selectedOptions` 数组初始化为选中的项的数组。当用户选择其他选项时,`selectedOptions` 数组会相应地更新。同时,我们还可以通过 `@change` 事件监听选中项的变化,并及时更新 `selectedOptions` 数组的值,以便在输入框中回显选中的项。需要注意的是,由于 `el-cascader` 是异步加载数据,因此在多选模式下,我们需要设置 `filterable` 属性为 `true`,以便在输入框中搜索选项。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](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)