当前位置：首页 > VUE

vue实现多个选框select

2026-02-21 15:50:38VUE

实现多选框（Select）的基本方法

在Vue中实现多选框可以通过原生HTML的<select multiple>或第三方UI库（如Element UI、Vuetify）完成。以下是两种常见实现方式：

原生HTML实现

vue实现多个选框select

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

<script>
export default {
  data() {
    return {
      selectedItems: [],
      items: [
        { value: 'opt1', label: 'Option 1' },
        { value: 'opt2', label: 'Option 2' }
      ]
    }
  }
}
</script>

Element UI实现

vue实现多个选框select

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

处理多选数据绑定

多选框的值绑定需要使用数组类型变量：

通过v-model绑定到数组
选中项会自动添加到数组，取消选择会从数组移除

data() {
  return {
    selectedItems: [] // 初始为空数组
  }
}

自定义多选框样式与功能

对于需要高度自定义的场景，可以结合复选框实现：

<template>
  <div class="custom-multi-select">
    <div 
      v-for="item in items"
      :key="item.value"
      class="select-option"
      @click="toggleSelection(item)">
      <input 
        type="checkbox" 
        :checked="isSelected(item)"
        @change="toggleSelection(item)">
      {{ item.label }}
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    toggleSelection(item) {
      const index = this.selectedItems.indexOf(item.value)
      index === -1 
        ? this.selectedItems.push(item.value)
        : this.selectedItems.splice(index, 1)
    },
    isSelected(item) {
      return this.selectedItems.includes(item.value)
    }
  }
}
</script>

第三方库推荐

Element UI：提供功能丰富的多选组件，支持搜索、过滤、标签展示等
Vuetify：Material Design风格的多选组件
Vue Multiselect：专为Vue设计的轻量级多选组件（需单独安装）

npm install vue-multiselect

<template>
  <multiselect
    v-model="selected"
    :options="options"
    :multiple="true"
    :close-on-select="false"
    placeholder="Select items">
  </multiselect>
</template>