elementui select clear事件怎么拿到删除之前的值
时间: 2024-03-27 22:37:25 浏览: 111
elementUI select组件value值注意事项详解
Element UI 的 `el-select` 组件提供了 `clearable` 属性,可以使得下拉框右侧出现一个清空按钮。你可以通过监听 `clear` 事件来获取点击清空按钮之前的选中值。
具体来说,你可以在 `el-select` 上添加 `@clear` 监听器,然后在监听器中使用 `this.$refs.select.clearSingleSelect()` 方法来清空选中值,并且在此方法之前获取选中值。代码示例如下:
```html
<template>
<el-select v-model="selectedValue" ref="select" clearable @clear="handleClear">
<!-- 下拉框选项 -->
</el-select>
</template>
<script>
export default {
data() {
return {
selectedValue: '', // 下拉框绑定的变量
}
},
methods: {
handleClear() {
const oldValue = this.selectedValue; // 获取删除之前的选中值
this.$refs.select.clearSingleSelect(); // 清空选中值
console.log(oldValue); // 输出删除之前的选中值
},
},
};
</script>
```
这样,在点击清空按钮之前,`handleClear` 方法会先获取选中值,然后通过 `clearSingleSelect` 方法清空选中值。你可以在 `handleClear` 方法中使用 `oldValue` 来获取删除之前的选中值。
阅读全文