vue实现多选

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>
    <p>选中的选项: {{ selectedOptions }}</p>
  </div>
</template>

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

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

如果需要更丰富的多选功能，可以使用第三方 UI 库提供的多选组件。例如，Element UI 提供了 el-checkbox-group 和 el-checkbox 组件。

<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>
    <p>选中的选项: {{ selectedOptions }}</p>
  </div>
</template>

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

自定义多选逻辑

如果需要更灵活的控制，可以手动实现多选逻辑，通过监听事件和操作数据。

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

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' },
      ],
      selectedOptions: []
    };
  },
  methods: {
    toggleOption(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: #f0f0f0;
}
</style>

多选下拉菜单

如果需要多选下拉菜单，可以使用 el-select 组件（Element UI）并设置 multiple 属性。

<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: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' },
      ],
      selectedOptions: []
    };
  }
};
</script>

以上方法可以根据具体需求选择使用，从简单的复选框到复杂的多选下拉菜单均可实现。