BUG
ElementUISelect组件BUGElementUISelect组件BUG总结本文用于记录ElementUI中Select组件的一个缺陷，并提供该缺陷的解决方案（不修改源码）。该缺陷只能在特定场景下重现，不影响大部分场景使用；转载版本：所有版本。适配Vue3.x的Element-Plus没有这个问题。2023-3-2发现有人问了同样的问题，github传送门。我提了一个PR来解决这个问题，但是不知道什么时候会合并到trunk中。我发现维护elementUI项目的人很少，积累了很多openissues和PR。也有可能你这辈子都不会被融合。我们先通过这个动画来看一下问题现象：可以看到Select的值3与option中的值333不对应。上面总结中提到的特殊场景是：选项是异步加载的，而下拉框是在这之前打开的。代码：
newVue({el:'#app',data:{options:[]},computed:{selectValue(){constinitialValue=3constfound=this.options.find((line)=>line.value===initialValue);returnfound?found.value:'';},},created(){setTimeout(()=>{this.options=[{value:1,label:'111',},{value:2,label:'222',},{value:3,label:'333',},{value:4,label:'444',},];},1500);}})实际期望我们的期望是：没有option时，不显示Select的值，正确显示对应的值选项加??载成功后Options.相信通过代码，大家已经明白了问题所在。显然，ElementUI内部并没有考虑这种场景。Thatistosay,whentheoptionchanges(thedrop-downlistisopened),itdoesnotprocessthelabelcorrespondingtothevalueaccordingtotheoption.其详细内容，有兴趣的同学可以查阅相关源码。我们之前讨论过解决方案。当option发生变化时（下拉列表打开），ElementUI内部并没有做相应的处理，那么我们换个思路：假设option已经正常渲染了，此时我们设置值，是否会正常显示标签？答案是肯定的！这一点我们比较容易猜到，因为我们经常会遇到设置值的情况。显然，ElementUI可以很好地处理值。然后我们修改代码，设置选项渲染后的值：constinitialValue=3newVue({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是key，保证option先被渲染//如果没有nextTick，结果和之前一样，逻辑上和computedproperty没有区别this.$nextTick(()=>{this.selectValue=initialValue})},1500);}})个人经验总结，ElementUI作为一个组件库，没有AntDesign那么完美。最近需要一个表格组件相关的坑。这不是一个错误，但它并不容易使用。Element-Plus相对好用，但只适用于Vue3.x项目。路漫漫其修远兮，上下寻觅。
