ElementUI Select 组件的 BUG
概要
本文用于记录 ElementUI 中 Select 组件的一个缺点，并提供了一个解决该缺点的计划（不魔改源码）。
- 该缺点只有在特定的场景下才能够复现，不影响大多数场景的应用；
- 复现版本：所有版本。适配
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 = 3new 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 的我的项目中。
路漫漫其修远兮，吾将上下而求索。