关于vue.js:ElementUI-Select-组件的-BUG

ElementUI Select 组件的 BUG

概要

本文用于记录 ElementUI 中 Select 组件的一个缺点，并提供了一个解决该缺点的计划（不魔改源码）。

1. 该缺点只有在特定的场景下才能够复现，不影响大多数场景的应用；
2. 复现版本：所有版本。适配 Vue 3.x 的 Element-Plus 没有该问题。

问题景象

先通过这张动图感受一下：

能够看到，Select的值 3 与选项中的 333 对应不上。上述概要中提到的非凡场景就是：选项是异步加载的，在这之前先关上了下拉框。

代码：

<div id="app">
  <el-select v-model="selectValue" placeholder="请抉择">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</div>

new Vue({
  el: '#app',
  data: {options: [] },
  computed: {selectValue() {
      const initialValue = 3
      const found = this.options.find((line) => line.value === initialValue);
      return found ? found.value : '';
    },
  },
  created() {setTimeout(() => {
      this.options = [
        {
          value: 1,
          label: '111',
        },
        {
          value: 2,
          label: '222',
        },
        {
          value: 3,
          label: '333',
        },
        {
          value: 4,
          label: '444',
        },
      ];
    }, 1500);
  }
})

理论冀望

咱们的冀望是：在没有选项时，不显示 Select 的值，并且在选项加载胜利后正确显示对应的选项。

置信通过代码，大家曾经明确了问题所在，显然 ElementUI 外部是没有思考到这种场景的，也就是说，在选项发生变化时（下拉列表关上），其外部没有依据选项解决 value 对应的 label。

对于其细节，有趣味的同学能够去翻翻相干源码。

解决方案

之前咱们探讨了，选项发生变化时（下拉列表关上），ElementUI 外部没有做相应的解决，那咱们换个思路：

假如选项曾经失常渲染，此时咱们去设置 value，是否会失常显示其对应的 label？

答案是必定的！这一点，咱们也比拟好猜，因为咱们会常常遇到设置 value 的状况，显然 ElementUI 对 value 的解决比较完善。

那么咱们批改下代码，在选项渲染后再设置 value：

const initialValue = 3

new Vue({
  el: '#app',
  data: {options: [], selectValue: "" },
  created() {setTimeout(() => {
      this.options = [
        {
          value: 1,
          label: '111',
        },
        {
          value: 2,
          label: '222',
        },
        {
          value: 3,
          label: '333',
        },
        {
          value: 4,
          label: '444',
        },
      ];
      // nextTick 是要害，确保了先渲染选项
      // 如果没有 nextTick，那后果和之前一样，逻辑上和计算属性没有区别
      this.$nextTick(() => {this.selectValue = initialValue})
    }, 1500);
  }
})

总结

集体教训，ElementUI 作为一个组件库，没有 Ant Design 欠缺，最近还须要一个表格组件相干的坑，不算 bug，但不够好用。Element-Plus 绝对好用，但只实用于 Vue 3.x 的我的项目中。

路漫漫其修远兮，吾将上下而求索。