直击痛点！vue el-select 2个下拉框联动故障修复全攻略

前端

2023-04-12 00:27:39

vue el-select 2个下拉框联动：终极排错指南

在vue项目中，el-select组件广泛用于下拉选择，但当涉及到两个下拉框联动时，却常遭遇一个棘手的bug：无法选中第二个下拉框的值。本文将深入分析这一bug的根源，并提供多种解决方案，助您彻底解决这一难题。

bug分析

el-select的默认行为会导致该bug的产生。当第一个下拉框的值发生变化时，它会自动将第二个下拉框的值重置为第一个下拉框的值。这阻止了用户选中第二个下拉框中的其他选项。

解决方案

要解决这个bug，有多种方法可供选择：

1. 使用 v-model 双向绑定

通过 v-model 双向绑定，可以手动控制第二个下拉框的值，从而避免被第一个下拉框的值重置。

<el-select v-model="selectedValue1">
  <!-- ... -->
</el-select>

<el-select v-model="selectedValue2">
  <!-- ... -->
</el-select>

const app = new Vue({
  data() {
    return {
      selectedValue1: 'a',
      selectedValue2: 'c',
    };
  },
});

2. 使用 @change 事件

通过 @change 事件，可以在第一个下拉框发生变化时，手动更新第二个下拉框的值。

<el-select @change="handleSelectChange1">
  <!-- ... -->
</el-select>

<el-select>
  <!-- ... -->
</el-select>

const app = new Vue({
  data() {
    return {
      selectedValue1: 'a',
    };
  },
  methods: {
    handleSelectChange1(value) {
      this.selectedValue2 = value;
    },
  },
});

3. 使用 ref 属性

通过 ref 属性，可以在Vue实例中获取下拉框的DOM元素，并手动操作下拉框的值。

<el-select ref="select1">
  <!-- ... -->
</el-select>

<el-select ref="select2">
  <!-- ... -->
</el-select>

const app = new Vue({
  data() {
    return {
      selectedValue1: 'a',
    };
  },
  mounted() {
    this.$refs.select1.$el.addEventListener('change', (e) => {
      this.selectedValue2 = e.target.value;
    });
  },
});

示例代码

以下是一个使用以上方法解决bug的示例：

<el-select v-model="selectedValue1">
  <el-option
    v-for="item in options1"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  />
</el-select>

<el-select v-model="selectedValue2">
  <el-option
    v-for="item in options2"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  />
</el-select>

const app = new Vue({
  data() {
    return {
      options1: [
        { value: 'a', label: 'A' },
        { value: 'b', label: 'B' },
      ],
      options2: [
        { value: 'c', label: 'C' },
        { value: 'd', label: 'D' },
      ],
      selectedValue1: 'a',
      selectedValue2: 'c',
    };
  },
});