element 下拉框 el-select 自定义控制某项禁止选择
时间: 2023-07-26 16:49:24 浏览: 2057
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
要自定义控制 `el-select` 中某一项是否可选,可以使用 `el-select` 的 `filterable` 属性配合 `filter-method` 方法实现。
首先,需要在 `el-select` 中设置 `filterable` 属性为 `true`,这样就会出现搜索框。然后,通过 `filter-method` 方法来控制某一项是否可选。
具体操作如下:
1. 在 `el-select` 中设置 `filterable` 属性为 `true`。
```html
<el-select v-model="selectedOption" filterable>
<!-- options -->
</el-select>
```
2. 在 `el-select` 中的每一项的 `filter-method` 属性中定义一个函数,判断某一项是否可选。
```html
<el-select v-model="selectedOption" filterable>
<el-option
v-for="option in options"
:key="option.value"
:label="option.label"
:value="option.value"
:filter-method="optionFilter"
/>
</el-select>
```
3. 在 Vue 实例中定义 `optionFilter` 方法,根据自己的需求判断某一项是否可选,然后返回 `true` 或 `false`。
```javascript
export default {
data() {
return {
selectedOption: '',
options: [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' },
]
}
},
methods: {
optionFilter(value, option) {
// 判断某一项是否可选
if (option.label === 'Option 2') {
return false; // 不可选
} else {
return true; // 可选
}
}
}
}
```
这样,就可以根据自己的需求控制 `el-select` 中某一项是否可选了。
阅读全文