当前位置：首页 > VUE

vue实现多选互斥

2026-02-18 19:10:52VUE

Vue 实现多选互斥的方法

多选互斥指的是在多个选项中，允许选择多个，但某些选项之间存在互斥关系（即选择 A 则不能选 B）。以下是几种实现方式：

使用计算属性和监听器

通过计算属性和 watch 监听选项变化，动态调整互斥选项的状态。

vue实现多选互斥

data() {
  return {
    options: [
      { id: 1, label: '选项A', selected: false },
      { id: 2, label: '选项B', selected: false },
      { id: 3, label: '选项C', selected: false }
    ],
    mutualExclusions: {
      1: [2], // 选项A与选项B互斥
      2: [1]  // 选项B与选项A互斥
    }
  };
},
methods: {
  toggleOption(option) {
    option.selected = !option.selected;
    if (option.selected) {
      this.handleMutualExclusion(option.id);
    }
  },
  handleMutualExclusion(selectedId) {
    const exclusions = this.mutualExclusions[selectedId] || [];
    exclusions.forEach(id => {
      const item = this.options.find(opt => opt.id === id);
      if (item) item.selected = false;
    });
  }
}

使用自定义指令

通过自定义指令动态绑定互斥逻辑，简化模板中的代码。

vue实现多选互斥

Vue.directive('mutual-exclude', {
  update(el, binding, vnode) {
    const { value, oldValue } = binding;
    if (value === oldValue) return;
    if (value) {
      const exclusions = vnode.context.mutualExclusions[el.dataset.id] || [];
      exclusions.forEach(id => {
        const checkbox = document.querySelector(`[data-id="${id}"]`);
        if (checkbox) checkbox.checked = false;
      });
    }
  }
});

模板中使用：

<input 
  type="checkbox" 
  v-model="option.selected" 
  v-mutual-exclude="option.selected" 
  :data-id="option.id"
  v-for="option in options"
/>

使用 Vuex 管理状态

如果项目复杂，可以用 Vuex 集中管理状态，通过 getters 和 mutations 实现互斥逻辑。

const store = new Vuex.Store({
  state: {
    options: [
      { id: 1, label: '选项A', selected: false },
      { id: 2, label: '选项B', selected: false }
    ]
  },
  mutations: {
    toggleOption(state, id) {
      const option = state.options.find(opt => opt.id === id);
      if (option) {
        option.selected = !option.selected;
        if (option.selected && id === 1) {
          const other = state.options.find(opt => opt.id === 2);
          if (other) other.selected = false;
        }
      }
    }
  }
});