vue 实现多选

Vue 实现多选功能

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

使用复选框（Checkbox）实现多选

创建一组复选框，利用 v-model 绑定到数组实现多选。

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

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

使用多选下拉框（Select）实现多选

通过 <select> 标签的 multiple 属性结合 v-model 绑定数组。

<template>
  <div>
    <select v-model="selectedOptions" multiple>
      <option 
        v-for="option in options" 
        :key="option.value" 
        :value="option.value"
      >
        {{ option.label }}
      </option>
    </select>
    <p>已选择: {{ selectedOptions }}</p>
  </div>
</template>

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

使用第三方组件库（如 Element UI）

如果项目中使用 Element UI，可以直接使用其多选组件。

<template>
  <div>
    <el-select v-model="selectedOptions" multiple placeholder="请选择">
      <el-option
        v-for="option in options"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      />
    </el-select>
    <p>已选择: {{ selectedOptions }}</p>
  </div>
</template>

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

自定义多选组件

通过自定义组件实现更灵活的多选功能。

<template>
  <div>
    <div 
      v-for="option in options" 
      :key="option.value" 
      @click="toggleSelection(option.value)"
      :class="{ 'selected': selectedOptions.includes(option.value) }"
    >
      {{ option.label }}
    </div>
    <p>已选择: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'orange', label: 'Orange' }
      ],
      selectedOptions: []
    };
  },
  methods: {
    toggleSelection(value) {
      const index = this.selectedOptions.indexOf(value);
      if (index === -1) {
        this.selectedOptions.push(value);
      } else {
        this.selectedOptions.splice(index, 1);
      }
    }
  }
};
</script>

<style>
.selected {
  background-color: #eee;
}
</style>

以上方法可以根据具体需求选择适合的方式实现多选功能。