当前位置：首页 > VUE

vue实现多选联动

2026-01-07 00:53:35VUE

vue实现多选联动的方法

使用v-model绑定数组

在Vue中，可以通过v-model绑定一个数组来实现多选联动。当复选框被选中或取消选中时，数组会自动更新。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        v-model="selectedOptions" 
        :value="option.value"
      >
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],
      selectedOptions: []
    }
  }
}
</script>

使用计算属性实现联动逻辑

可以通过计算属性来实现更复杂的联动逻辑，例如根据某些选项的选择状态来禁用或启用其他选项。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        v-model="selectedOptions" 
        :value="option.value"
        :disabled="isDisabled(option.value)"
      >
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],
      selectedOptions: []
    }
  },
  methods: {
    isDisabled(value) {
      return this.selectedOptions.includes('option1') && value === 'option3'
    }
  }
}
</script>

使用watch监听选择变化

可以通过watch来监听选择的变化，并在选择变化时执行相应的联动逻辑。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        v-model="selectedOptions" 
        :value="option.value"
      >
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],
      selectedOptions: []
    }
  },
  watch: {
    selectedOptions(newVal) {
      if (newVal.includes('option1')) {
        console.log('选项1被选中，执行联动逻辑')
      }
    }
  }
}
</script>

使用第三方组件库

如果需要更复杂的功能，可以考虑使用第三方组件库如Element UI或Ant Design Vue，它们提供了丰富的多选联动组件。

<template>
  <div>
    <el-checkbox-group v-model="selectedOptions">
      <el-checkbox 
        v-for="option in options" 
        :key="option.value" 
        :label="option.value"
      >
        {{ option.label }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],
      selectedOptions: []
    }
  }
}
</script>

使用自定义事件实现父子组件联动

在父子组件中，可以通过自定义事件来实现多选联动。

<!-- 父组件 -->
<template>
  <div>
    <child-component 
      :options="options" 
      @selection-change="handleSelectionChange"
    />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],
      selectedOptions: []
    }
  },
  methods: {
    handleSelectionChange(selected) {
      this.selectedOptions = selected
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        v-model="localSelected" 
        :value="option.value"
      >
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  props: ['options'],
  data() {
    return {
      localSelected: []
    }
  },
  watch: {
    localSelected(newVal) {
      this.$emit('selection-change', newVal)
    }
  }
}
</script>

vue实现多选联动