el-cascader 单选使用filterable搜索有重复的展示一个即可
时间: 2024-10-15 17:19:09 浏览: 5
`el-cascader` 是 Element UI 中的一个下拉选择组件,它支持树状结构的选择,并且提供了一些高级功能,如筛选(filterable)。当你希望在单选模式下使用筛选功能,遇到重复项时,通常的需求是只显示一项,而不是让用户可以选择多次。
默认情况下,如果有多项匹配用户的输入,`el-cascader` 的 `filterable` 属性会显示所有匹配的结果。为了实现在单选模式下仅显示一个重复项,你可以采用以下步骤:
1. **遍历数据处理**:在数据渲染之前,对数组进行预处理,移除重复项或标记已选择的项目,保留唯一展示项。
```javascript
// 假设你有一个选项数组 data 和已选择的值 selectedValue
let uniqueData = [...new Set(data.map(item => item.value))].map(value => {
return data.find(item => item.value === value);
});
```
2. **组件配置**:更新组件的数据源(props 或者通过 Vue 的 computed 属性)为处理后的 `uniqueData`。
3. **监听值变化**:当用户选择一个选项时,检查是否已存在相同的值,如果有则清除其他选项并设置当前选择的项。
```javascript
methods: {
selectOption(option) {
if (this.selectedValue.includes(option.value)) {
this.$refs.cascader.clearSelection();
} else {
this.selectedValue = [option.value];
}
},
},
```
4. **禁用复选框**:在每个选项上添加一个 `disabled` 属性,当选择的值等于已存在的唯一值时,该选项禁止被选中。
```html
<el-cascader :options="uniqueData" :props="{valueKey: 'value', label: 'label'}" v-model="selectedValue" @change="selectOption" :disabled="isDisabled">
</el-cascader>
```
```javascript
data() {
return {
...,
isDisabled: false,
};
},
computed: {
...,
isDisabled() {
return this.selectedValue.length > 0 && uniqueData.some(item => item.value === this.selectedValue[0]);
},
},
```