问题

今天用 ElementUISelect 选择器 在做前端数据列表的查询表单时,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。