当前位置：首页 > VUE

vue实现多选互斥

2026-01-18 02:44:20VUE

Vue 实现多选互斥的方法

多选互斥指的是在多个选项中，允许选择多个选项，但某些选项之间不能同时被选中。以下是几种实现方式：

使用计算属性和监听器

通过计算属性和监听器动态控制选项的互斥逻辑。定义一个数组存储选中的值，监听其变化，当检测到互斥选项被选中时，自动取消其他互斥选项。

data() {
  return {
    selectedItems: [],
    options: [
      { id: 1, label: 'Option 1', group: 'groupA' },
      { id: 2, label: 'Option 2', group: 'groupA' },
      { id: 3, label: 'Option 3', group: 'groupB' }
    ]
  };
},
watch: {
  selectedItems(newVal) {
    const groupAItems = newVal.filter(item => {
      const option = this.options.find(opt => opt.id === item);
      return option.group === 'groupA';
    });
    if (groupAItems.length > 1) {
      this.selectedItems = newVal.filter(item => item !== groupAItems[0]);
    }
  }
}

使用自定义方法处理互斥逻辑

在用户选择时调用自定义方法，手动检查并处理互斥选项。

methods: {
  handleSelection(option) {
    const group = option.group;
    if (this.selectedItems.includes(option.id)) {
      this.selectedItems = this.selectedItems.filter(id => id !== option.id);
    } else {
      const conflictItems = this.options.filter(
        opt => opt.group === group && opt.id !== option.id
      );
      this.selectedItems = [
        ...this.selectedItems.filter(id => !conflictItems.some(opt => opt.id === id)),
        option.id
      ];
    }
  }
}

使用复选框和条件渲染

通过复选框的 v-model 绑定选中状态，结合条件判断实现互斥。

<template>
  <div v-for="option in options" :key="option.id">
    <input
      type="checkbox"
      :id="option.id"
      :value="option.id"
      v-model="selectedItems"
      @change="handleChange(option)"
    />
    <label :for="option.id">{{ option.label }}</label>
  </div>
</template>

<script>
export default {
  methods: {
    handleChange(option) {
      if (this.selectedItems.includes(option.id)) {
        const sameGroupItems = this.options.filter(
          opt => opt.group === option.group && opt.id !== option.id
        );
        sameGroupItems.forEach(item => {
          const index = this.selectedItems.indexOf(item.id);
          if (index > -1) {
            this.selectedItems.splice(index, 1);
          }
        });
      }
    }
  }
};
</script>

使用单选框模拟多选互斥

通过单选框实现互斥逻辑，同时允许其他非互斥选项多选。

<template>
  <div v-for="group in groupedOptions" :key="group.name">
    <div v-for="option in group.items" :key="option.id">
      <input
        type="radio"
        :name="group.name"
        :value="option.id"
        v-model="selectedItems[group.name]"
      />
      <label>{{ option.label }}</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: {},
      groupedOptions: [
        {
          name: 'groupA',
          items: [
            { id: 1, label: 'Option 1' },
            { id: 2, label: 'Option 2' }
          ]
        },
        {
          name: 'groupB',
          items: [
            { id: 3, label: 'Option 3' }
          ]
        }
      ]
    };
  }
};
</script>