Element el-select 踩坑 - 切换单多选时显示问题

前言

产品需求：

第三个下拉选项的值和是否多选 要跟据第一个下拉值动态改变
因此 切换1的时候要将3绑定的值以及options清空，以及动态改变第三个下拉的multiple值

---

问题 - 由单选切换多选时 select绑定的值已经清空但还是显示上一次选中的值

1.效果图

原因

单选和多选这两个 input 看上去没差别（自身和层级都一致），vue出于提高性能，所以 vue 给复用了

解决方案

如何告诉vue 单选和多选不要复用呢？答案是 ----- 添加key 这里引用下官方文档

上代码：

效果：问题解决啦啦啦啦啦！！！

总结

以上就是我使用el-select切换单多选时遇到的问题以及解决方案，欢迎交流 耶耶耶。