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

  • Z时代
  • 2024-03-14
  • 分类：IT

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

回答：

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

vue2
执行这段代码就行

    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");
      };

vue3
源代码参考 ： node_modules\element-plus\lib\components\select\src\useSelect.js deleteSelected（方法名）

main.ts
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
app.use(ElementPlus);
app._context.components.ElSelect.mounted = function () {
  let self = this;
  this.handleClearClick = function (event$1) {
    event$1.stopPropagation();
    const value = self.$props.multiple ? [] : null;
    if (value === []) {
      for (const item of self.selected) {
        if (item.isDisabled) value.push(item.value);
      }
    }
    self.$emit("update:modelValue", value);
    if (self.$props.modelValue !== value) {
      self.$emit("change", value);
    }
    self.hoverIndex = -1;
    self.visible = false;
    self.$emit("clear");
  };
};

回答：

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

回答：

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

以上是 elementui的el-select点击clearable后value默认会为空字符串，如何全局修改成为null？ 的全部内容， 来源链接： utcz.com/p/934314.html

回到顶部