当前位置：首页 > VUE

vue实现多选功能

2026-02-19 23:05:58VUE

Vue 多选功能实现方法

基于原生 `<select multiple>`

使用 HTML 原生多选下拉框，结合 v-model 实现双向绑定：

vue实现多选功能

<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>

使用复选框组

通过 v-for 渲染复选框列表，利用数组存储选中值：

vue实现多选功能

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

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

第三方组件库实现

Element UI 的多选组件示例：

<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 {
      selectedItems: [],
      items: [
        { value: 'opt1', label: 'Option 1' },
        { value: 'opt2', label: 'Option 2' }
      ]
    }
  }
}
</script>

自定义多选组件

创建可复用的多选组件：

<!-- MultiSelect.vue -->
<template>
  <div class="multi-select">
    <div 
      v-for="item in items"
      class="select-item"
      :class="{ 'selected': selectedItems.includes(item.value) }"
      @click="toggleSelect(item.value)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: Array,
    value: Array
  },
  data() {
    return {
      selectedItems: this.value || []
    }
  },
  methods: {
    toggleSelect(value) {
      const index = this.selectedItems.indexOf(value)
      if (index === -1) {
        this.selectedItems.push(value)
      } else {
        this.selectedItems.splice(index, 1)
      }
      this.$emit('input', this.selectedItems)
    }
  },
  watch: {
    value(newVal) {
      this.selectedItems = newVal
    }
  }
}
</script>

<style>
.select-item {
  padding: 8px;
  cursor: pointer;
}
.selected {
  background-color: #409EFF;
  color: white;
}
</style>