关于前端:elmentui-的下拉组件-多选可远程搜索场景下切换搜索条件导致选中异常方案

1. 场景

 在某种业务场景下，咱们须要实现下拉组件可多选且可近程搜寻。这个应用 element-ui 的 select 组件能够很简略的实现咱们的需要。在应用的过程中大家应该都会发现一个小小的 bug。当我在以后下拉数据中选中其中一项，而后切换搜寻条件再进行近程搜寻的时候会发现选中项不是咱们之前选中的后果。选中前![image.png](/img/bVcPcA2)
切换后![image.png](/img/bVcPcCi)
尽管 v -model 的值是之前选中的值 (已验证), 但页面上显示的曾经不对了。输入框内的选中项应该要是李 *, 然而组件上显示确实是刘 *。

2. 问题定位

 仔细观察两者的差别, 会发现刘 * 是在李 * 之前被选中的地位, 也就是在第二列的地位。也就是说当数据被选中的时候这个下标会被组件记录下来。

3. 问题解决

 尽管这个问题不影响数据的准确性, 然而会给使用者造成很大的误会。因为公司面对的是医院的用户，所以这个问题必须解决。要么换组件, 要么想方法补救。对于我的项目来说不可能轻易换组件, 只能想方法补救。因为输入框内只会显示第一个选中项, 所以只有保障切换检索条件后第一个选中项能处于检索后果的第二个地位, 就能保障输入框内的内容显示正确。话不多说一顿梭。首先记录第一次选中事件的下标值。而后把选中的值与后续检索后的后果进行合并, 并调整下标值对应的数据与以后第一次选中的数据进行对换。验证后果：![image.png](/img/bVcPcPL)
能够看到此时输入框内显示的选中标签值完全正确, 并且在下拉列表中也是被选中状态。

4. 可选择性优化

 如果抉择了多项数据, 在不停的切换检索条件的状况下。输入框内只会显示第一次的选中项, 其余选中项则无奈显示, 只会有个数字提醒总共抉择了多少项。这样对于用户来说无奈直观的看到之前抉择了哪几项。在输入框中无奈显示, 那咱们能够在下拉列表中显示。只须要把 v -model 绑定的后果汇合并到最初一次检索的后果集中。验证后果:
![image.png](/img/bVcPcSm)

5. 总结

 通过上述解决形式, 尽管不能很完满的解决这个问题, 然而容易造成用户误会的概率大大降低了。通过进一步的优化操作也同时晋升了用户的体验度。