el-select 在编辑时候,遇到了数据里边没有的文本值 怎么让他强行回显的时候为空,
时间: 2024-02-20 10:57:25 浏览: 192
可以使用 `filterable` 属性和 `allow-create` 属性来实现这个功能。使用了这两个属性后,当用户输入一个在下拉列表中不存在的文本值时,`el-select` 组件会将这个文本值作为选中项返回。而如果你希望这个文本值不能被返回,则需要在选取完毕后手动判断文本值是否存在于下拉列表中,如果不存在则将选中项置为空。
代码示例:
```html
<el-select v-model="value" filterable allow-create>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
```
```js
export default {
data() {
return {
value: '',
options: [
{
label: '选项1',
value: 'option1'
},
{
label: '选项2',
value: 'option2'
}
]
}
},
watch: {
value(val) {
if (val && !this.options.find(o => o.value === val)) {
this.value = '';
}
}
}
}
```
在上面的代码中,我们使用 `filterable` 和 `allow-create` 属性来实现了在下拉列表中输入不存在的文本值时将其作为选中项返回的功能。然后,我们使用了一个 `watch` 监听 `value` 值的变化,在值变化的时候判断当前选中的值是否存在于下拉列表中,如果不存在则将其置为空。这样就可以达到强行回显为空的效果了。
阅读全文