乐趣区

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

ElementUI Select 组件的 BUG

概要

本文用于记录 ElementUISelect 组件的一个缺点,并提供了一个解决该缺点的计划(不魔改源码)。

  1. 该缺点只有在特定的场景下才能够复现,不影响大多数场景的应用;
  2. 复现版本:所有版本。适配 Vue 3.xElement-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 的状况,显然 ElementUIvalue 的解决比较完善。

那么咱们批改下代码,在选项渲染后再设置 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 的我的项目中。

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

退出移动版