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

朱雀 2021-03-29 12:01 1307阅读 1赞

## 问题

今天用 `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 的源码](https://github.com/ElemeFE/element/blob/dev/packages/select/src/select.vue) 中点击叉号的处理逻辑：

```
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](https://element.eleme.io/#/zh-CN/component/select#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。