ViewUI 多选 select 改变下拉选项数据会保留上次选中

问题描述

设置为多选的 select，更改 option 对应的数据源后，选择同样的顺序选项会保留上次显示的 label 值，但是值是改变的

遇到问题使用的版本如下

vue@2.6.12 
view-design@4.2.0

问题截图如下

vue_select_option_label.png

步骤如下：

1. 设置一个 select 为 multiple，
2. 选择任意一个选项
3. 更改 option 对应的数据源，eg: ['a', 'b'] => ['c', 'd']
4. 然后在点击上次选中同位置的选项
5. 选择后，select 显示的还是上次旧值，单 value 是改变的

解决办法

1. 通过给第二个输入框增加 :label 属性可以解决
2. 或者把第二个输入框 options 的 key 更改为非 index

问题原因

通过分析源码，发现 option 的点击事件是使用一个 optionLabel 的计算属性获取值，这里会默认通过 $el.textContent 获取，当这个计算属性的依赖没有变化的时候，它不会重新计算值，造成通知给父组件 on-select-selected 的 label 还是使用旧的数据。

如果设置了 label，optionLabel 会优先使用，且每次以来变化计算属性会重新计算，就能获取到最新的值了

// option.vue 的部分代码
computed: {
  optionLabel() {
    return this.label || (this.$el && this.$el.textContent);
  }
},
methods: {
  select() {
    if (this.itemDisabled) return false;
    this.dispatch('iSelect', 'on-select-selected', {
      value: this.value,
      label: this.optionLabel,
      tag: this.tag
    });
    this.$emit('on-select-selected', {
      value: this.value,
      label: this.optionLabel,
      tag: this.tag
    });
  },
},

问题的demo

https://run.iviewui.com/U3bSSEh3