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

问题

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

HTML 代码：

<el-select v-model="status" placeholder="全部" clearable style="width: 140px" class="filter-item">
  <el-option label="已审核" :value="1" />
  <el-option label="未审核" :value="0" />
</el-select>

JS代码：

export default {
  data() {
    return {
      status: null
    }
  }
}

解析

我们先来看下 ElementUI 的源码 中点击叉号的处理逻辑：

handleClearClick(event) {
  this.deleteSelected(event);
},
deleteSelected(event) {
  event.stopPropagation();
  const value = this.multiple ? [] : '';
  this.$emit('input', 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">
  <el-option label="已审核" :value="1" />
  <el-option label="未审核" :value="0" />
</el-select>

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

版权属于：瞭月

本文链接：https://www.lervor.com/archives/181/

版权声明：本文为瞭月原创文章，转载请附上原文出处链接和本声明。