vue.js - elementui的el-select点击clearable后value默认会为空字符串，如何全局修改成为null？

Question

<template>
  <div>
    value:{{ JSON.stringify(value) }}
    <el-select v-model="value" clearable placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }],
        value: null
      }
    }
  }
</script>

elementui的el-select点击clearable后value默认会为空字符串，并不是我默认设置的null，我可以通过@clear来改变value的值，但是我的项目已经非常庞大，牵扯的页面有很多，怎么在影响页面最小的情况下，全局去更改呢？

Answer 1

执行这段代码就行

    this.$options.components.ElSelect.options.methods.deleteSelected =
      function deleteSelected(event) {
        event.stopPropagation();
        // 改动在这,原始的是这样  var value = this.multiple ? [] : '';   
        var value = this.multiple ? [] : null;   
        this.$emit("input", value);
        this.emitChange(value);
        this.visible = false;
        this.$emit("clear");
      };

是否会引发bug ，你自己测一下，我只是简单看了一下

Answer 2

我不感觉这是一个问题呀，你完全没必要去让他全变成null吧？你为什么会有这样的需求？你的项目每个页面的逻辑都是独立的，而且你判断时""和null的判断几乎是一样的。