el-select 清除事件
时间: 2023-11-29 11:06:46 浏览: 92
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
根据提供的引用内容,el-select没有提供清除事件,但可以通过绑定remove-tag事件来实现清除功能。具体实现方法如下:
```html
<el-select v-model="selected" multiple @remove-tag="handleRemoveTag">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
```
```javascript
data() {
return {
selected: [],
options: [
{ value: 'value1', label: 'label1' },
{ value: 'value2', label: 'label2' },
{ value: 'value3', label: 'label3' }
]
}
},
methods: {
handleRemoveTag(tag) {
const index = this.selected.indexOf(tag);
if (index !== -1) {
this.selected.splice(index, 1);
}
}
}
```
在el-select中绑定remove-tag事件,当用户点击tag的关闭按钮时,会触发该事件。在事件处理函数中,获取要删除的tag的值,然后在选中的数组中找到该值的索引并删除即可。
阅读全文