vue el-select重新赋值选中之后为什么不显示

可能是因为重新赋值后，el-select的绑定值（v-model）没有同步更新导致的。你可以尝试在重新赋值后手动更新绑定值，例如：

this.selectedValue = newValue; // 将新的值赋给绑定值
this.$nextTick(() => {
  this.$refs.select.clearSingleSelect(); // 先将选中状态清空
  this.$refs.select.setCurrentOption(this.selectedValue); // 再设置新的选中状态
});

其中，`$nextTick`方法可以确保在DOM更新后再执行操作，`$refs.select`可以获取到el-select组件的实例，通过调用其方法来修改选中状态。

相关问题

vue el-select el-input 联动

vue中的el-select和el-input可以通过v-model进行双向绑定，实现联动效果。具体实现步骤如下：

1. 为el-select组件添加v-model属性，绑定一个选中的值；
2. 为el-input组件添加v-model属性，绑定需要联动的值；
3. 监听el-select的change事件，将选中的值赋值给绑定的值；
4. 在el-input组件中通过计算属性computed获取el-select的选中值，并实时更新联动的值。

下面是实现代码：

<template>
  <div>
    <el-select v-model="selectedValue" @change="handleChange">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <el-input v-model="inputValue"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ],
      selectedValue: '',
      inputValue: ''
    }
  },
  methods: {
    handleChange() {
      this.inputValue = this.selectedValue;
    }
  },
  computed: {
    selectedValue: {
      get() {
        return this.selectedValue;
      },
      set(value) {
        this.selectedValue = value;
        this.inputValue = value;
      }
    }
  }
}
</script>

vue 两个el-select联动，选完第一个给第二个赋值，选中之后为什么不显示

可能是由于第二个el-select的选项数据没有同步更新导致的。你需要在第一个el-select的选项发生变化时，动态更新第二个el-select的选项数据。

例如，假设第一个el-select的选项数据为`options1`，第二个el-select的选项数据为`options2`，则可以在第一个el-select的`change`事件中动态更新`options2`，例如：

<template>
  <div>
    <el-select v-model="selectedOption1" @change="onChangeOption1">
      <el-option v-for="option in options1" :key="option.value" :label="option.label" :value="option.value" />
    </el-select>
    <el-select v-model="selectedOption2">
      <el-option v-for="option in options2" :key="option.value" :label="option.label" :value="option.value" />
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption1: '',
      selectedOption2: '',
      options1: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' }
      ],
      options2: []
    };
  },
  methods: {
    onChangeOption1() {
      // 根据选中的第一个选项动态更新第二个选项数据
      if (this.selectedOption1 === 'option1') {
        this.options2 = [
          { value: 'option1-1', label: 'Option 1-1' },
          { value: 'option1-2', label: 'Option 1-2' }
        ];
      } else if (this.selectedOption1 === 'option2') {
        this.options2 = [
          { value: 'option2-1', label: 'Option 2-1' },
          { value: 'option2-2', label: 'Option 2-2' }
        ];
      }
      // 将第二个选项重置为空
      this.selectedOption2 = '';
    }
  }
};
</script>

在`onChangeOption1`方法中，根据选中的第一个选项动态更新第二个选项数据，并将第二个选项重置为空。这样，在第一个el-select选中之后，第二个el-select的选项数据就会动态更新，并且选中的值也会正确显示。