ElementUI Select 组件 clearable 清空选中选项后类型不一致

Select 组件 clearable 清空选中选项后类型不一致

今天用 ElementUI 的 Select 选择器 在做前端数据列表的查询表单时，v-model 绑定的数据类型为整型，当点击 clearable 叉号清空选中的选项后 v-model 对应的变量值变成 空字符串’'了。具体代码如下：

HTML 代码：

JS代码：

export default {
data() {
return {
status: null
}
}
}
解析
我们先来看下 ElementUI 的源码 中点击叉号的处理逻辑：

handleClearClick(event) {
this.deleteSelected(event);
},
deleteSelected(event) {
event.stopPropagation();
const value = this.multiple ? [] : ‘’;
this.$emit{(}^{\prime }inpu{t}^{\prime },value);this.emitChange(value);this.visible=false;this.$emit(‘clear’);
}
从上面的源码中不难看出，点击叉号清空的时候，确实是赋值为 空字符串’’ 了。

解决
我们如何实现点击清空按钮的时候，能重新赋值为 null 呢？我们继续来看文档 Select Events，其中提供了用户点击清空按钮时触发的事件 clear。我们可以在其触发事件中进行重新赋值。最后的代码如下：

<el-select v-model=“status” placeholder=“全部” clearable style=“width: 140px” class=“filter-item” @clear=“status = null”>



请注意上面代码中的 @clear=“status = null”，就是通过该代码进行重新赋值为 null。