vue2 el-select在选项数据源发生变化时，更新当前选中数据的value和label值

当 Vue2 中的 el-select 组件的选项数据源发生变化时，需要手动更新当前选中数据的 value 和 label 值。可以通过监听选项数据源的变化事件，在事件处理函数中更新当前选中数据的 value 和 label 值。

示例代码如下：

<template>
  <el-select v-model="selected" :options="options" @options-change="handleOptionsChange"></el-select>
</template>

export default {
  data() {
    return {
      selected: '',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' }
      ]
    }
  },
  methods: {
    handleOptionsChange(newOptions) {
      // 获取当前选中数据的 value 和 label 值
      const value = this.selected
      const label = this.options.find(option => option.value === value)?.label || ''

      // 更新选项数据源和当前选中数据的 value 和 label 值
      this.options = newOptions
      this.selected = value
      this.$nextTick(() => {
        const newLabel = this.options.find(option => option.value === value)?.label || ''
        if (newLabel !== label) {
          this.$refs.select.updatePopper()
        }
      })
    }
  }
}

在 handleOptionsChange 方法中，首先获取当前选中数据的 value 和 label 值。然后，更新选项数据源和当前选中数据的 value 值，同时使用 $nextTick 方法等待 DOM 更新完成后，再次获取当前选中数据的 label 值，并与之前的 label 值比较，如果不同，调用 el-select 的 updatePopper 方法更新弹出框的位置。这样，就可以实现在选项数据源发生变化时，更新当前选中数据的 value 和 label 值。