当前位置：首页 > VUE

vue实现多选列表

2026-02-19 06:11:24VUE

Vue 实现多选列表的方法

基础实现

使用 v-model 绑定数组实现多选功能，结合 v-for 渲染列表项：

<template>
  <div>
    <h3>选择你喜欢的项目：</h3>
    <div v-for="item in items" :key="item.id">
      <input 
        type="checkbox" 
        :id="item.id" 
        :value="item.value" 
        v-model="selectedItems"
      >
      <label :for="item.id">{{ item.label }}</label>
    </div>
    <p>已选择：{{ selectedItems }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 'opt1', value: 'vue', label: 'Vue.js' },
        { id: 'opt2', value: 'react', label: 'React' },
        { id: 'opt3', value: 'angular', label: 'Angular' }
      ],
      selectedItems: []
    }
  }
}
</script>

使用组件库

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>

自定义样式多选

通过 CSS 和事件处理实现美观的多选效果：

<template>
  <div class="checkbox-list">
    <div 
      v-for="item in options"
      :key="item.value"
      class="checkbox-item"
      :class="{ active: selected.includes(item.value) }"
      @click="toggleSelection(item.value)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 1, label: '选项1' },
        { value: 2, label: '选项2' },
        { value: 3, label: '选项3' }
      ],
      selected: []
    }
  },
  methods: {
    toggleSelection(value) {
      const index = this.selected.indexOf(value)
      index === -1 
        ? this.selected.push(value) 
        : this.selected.splice(index, 1)
    }
  }
}
</script>

<style>
.checkbox-item {
  padding: 8px 12px;
  border: 1px solid #ddd;
  margin: 5px;
  cursor: pointer;
}
.checkbox-item.active {
  background-color: #409eff;
  color: white;
}
</style>

全选/反选功能

添加全选控制逻辑：

<template>
  <div>
    <input 
      type="checkbox" 
      id="selectAll" 
      v-model="allSelected"
      @change="toggleAll"
    >
    <label for="selectAll">全选</label>

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

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '项目A' },
        { id: 2, name: '项目B' },
        { id: 3, name: '项目C' }
      ],
      selected: [],
      allSelected: false
    }
  },
  methods: {
    toggleAll() {
      this.selected = this.allSelected 
        ? this.list.map(item => item.id) 
        : []
    }
  },
  watch: {
    selected(newVal) {
      this.allSelected = newVal.length === this.list.length
    }
  }
}
</script>