vue实现多个选框select

Vue 实现多个选框 Select

在 Vue 中实现多个选框（多选 Select）可以通过原生 <select> 元素结合 multiple 属性，或使用第三方 UI 库（如 Element UI、Vuetify 等）来实现。以下是两种常见方法：

使用原生 HTML <select> 元素

通过原生 <select> 标签设置 multiple 属性，绑定 Vue 的 v-model 来获取选中的值数组。

<template>
  <select v-model="selectedItems" multiple>
    <option v-for="item in items" :key="item.value" :value="item.value">
      {{ item.label }}
    </option>
  </select>
</template>

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

使用 Element UI 的 el-select 组件

Element UI 提供了更美观且功能丰富的多选 Select 组件。

<template>
  <el-select v-model="selectedItems" multiple placeholder="请选择">
    <el-option
      v-for="item in items"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

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

使用 Vuetify 的 v-select 组件

Vuetify 也提供了多选支持，通过 multiple 属性实现。

<template>
  <v-select
    v-model="selectedItems"
    :items="items"
    multiple
    label="Select"
  ></v-select>
</template>

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange'],
      selectedItems: []
    };
  }
};
</script>

注意事项

• 使用原生 <select> 时，需手动处理样式和交互，适合简单场景。
• 使用 UI 库（如 Element UI 或 Vuetify）可以快速实现美观且功能丰富的多选框。
• v-model 绑定的数据应为数组，用于存储选中的值。