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

作者站长头像
站长
· 阅读数 12
<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个回答
avatar
test
2024-07-03

是否会引发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");
  };
};
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容