vue实现点选多选

Vue 实现点选多选

在 Vue 中实现点选多选功能可以通过多种方式完成，以下是几种常见的方法：

使用 v-model 绑定数组

通过 v-model 绑定一个数组，当复选框被选中时，对应的值会被添加到数组中。

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

<script>
export default {
  data() {
    return {
      options: [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'orange', label: 'Orange' }
      ],
      selectedItems: []
    };
  }
};
</script>

使用计算属性和方法

如果需要更复杂的逻辑（如全选或反选），可以通过计算属性和方法实现。

<template>
  <div>
    <label>
      <input 
        type="checkbox" 
        v-model="allSelected" 
        @change="toggleAll"
      />
      Select All
    </label>
    <label v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        v-model="selectedItems" 
        :value="option.value"
      />
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'orange', label: 'Orange' }
      ],
      selectedItems: []
    };
  },
  computed: {
    allSelected: {
      get() {
        return this.selectedItems.length === this.options.length;
      },
      set(value) {
        this.selectedItems = value ? this.options.map(opt => opt.value) : [];
      }
    }
  },
  methods: {
    toggleAll() {
      this.allSelected = !this.allSelected;
    }
  }
};
</script>

使用第三方组件库

如果需要更丰富的功能（如分组、搜索等），可以使用第三方组件库如 Element UI 或 Vuetify。

以 Element UI 为例：

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

<script>
export default {
  data() {
    return {
      options: [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'orange', label: 'Orange' }
      ],
      selectedItems: []
    };
  }
};
</script>

动态渲染选项

如果需要从接口动态加载选项，可以通过异步请求实现。

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

<script>
export default {
  data() {
    return {
      options: [],
      selectedItems: []
    };
  },
  async created() {
    const response = await fetch('https://api.example.com/options');
    this.options = await response.json();
  }
};
</script>

以上方法可以根据实际需求灵活组合或扩展。