当前位置：首页 > VUE

vue多选实现

2026-01-13 00:39:25VUE

Vue多选实现方法

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

使用`v-model`绑定数组

通过v-model绑定一个数组，当复选框被选中时，值会自动添加到数组中。

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

<script>
export default {
  data() {
    return {
      options: [
        { value: 'apple', label: '苹果' },
        { value: 'banana', label: '香蕉' },
        { value: 'orange', label: '橙子' }
      ],
      selectedItems: []
    }
  }
}
</script>

使用第三方组件库

如Element UI、Ant Design Vue等提供了现成的多选组件。

Element UI示例：

<template>
  <el-checkbox-group v-model="checkedCities">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      cities: ['上海', '北京', '广州', '深圳'],
      checkedCities: []
    }
  }
}
</script>

自定义多选组件

创建可复用的多选组件，封装逻辑和样式。

<template>
  <div class="multi-select">
    <div 
      v-for="item in items" 
      :key="item.id"
      class="select-item"
      :class="{ 'selected': isSelected(item) }"
      @click="toggleSelect(item)"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: Array,
    value: Array
  },
  methods: {
    isSelected(item) {
      return this.value.some(selected => selected.id === item.id)
    },
    toggleSelect(item) {
      const selected = [...this.value]
      const index = selected.findIndex(selected => selected.id === item.id)

      if (index > -1) {
        selected.splice(index, 1)
      } else {
        selected.push(item)
      }

      this.$emit('input', selected)
    }
  }
}
</script>

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

使用计算属性处理选择逻辑

通过计算属性对选择结果进行处理和过滤。

vue多选实现

<template>
  <div>
    <div v-for="user in users" :key="user.id">
      <input 
        type="checkbox" 
        v-model="selectedUserIds" 
        :value="user.id"
      >
      {{ user.name }}
    </div>
    <p>已选择用户: {{ selectedUsers }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' }
      ],
      selectedUserIds: []
    }
  },
  computed: {
    selectedUsers() {
      return this.users.filter(user => 
        this.selectedUserIds.includes(user.id)
      )
    }
  }
}
</script>