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

 

问题描述:

<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的值,但是我的项目已经非常庞大,牵扯的页面有很多,怎么在影响页面最小的情况下,全局去更改呢?


 

第 1 个答案:

没必要修改为 null,使用 null 会引发一些其他的问题,比如说默认值设置失败,开启多选属性时后续数据改变可能无法被监听的问题。


 

第 2 个答案:

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


 

第 3 个答案:

执行这段代码就行

    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 ,你自己测一下,我只是简单看了一下


已经使用了luaparse打印出了数据,但是不知道函数怎么调用