当前位置：首页 > VUE

vue 实现列表多选

2026-02-17 03:07:09VUE

实现多选列表的基础方法

使用 v-model 绑定数组实现多选，结合 v-for 渲染列表项。复选框的 value 属性决定选中时存入数组的值。

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

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, value: 'apple', label: 'Apple' },
        { id: 2, value: 'banana', label: 'Banana' },
        { id: 3, value: 'orange', label: 'Orange' }
      ],
      selectedItems: []
    }
  }
}
</script>

使用计算属性处理选中状态

通过计算属性派生全选/反选状态，实现批量操作功能。

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

<script>
export default {
  computed: {
    selectAll: {
      get() {
        return this.selectedItems.length === this.list.length
      },
      set(value) {
        this.selectedItems = value 
          ? this.list.map(item => item.value) 
          : []
      }
    }
  }
}
</script>

结合表格实现多选

在表格场景中，可通过行选择配合复选框实现专业的多选交互。

vue 实现列表多选

<template>
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" v-model="selectAll"></th>
        <th>名称</th>
        <th>价格</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="product in products" :key="product.id">
        <td><input type="checkbox" :value="product.id" v-model="selectedIds"></td>
        <td>{{ product.name }}</td>
        <td>{{ product.price }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 101, name: '手机', price: 5999 },
        { id: 102, name: '笔记本', price: 8999 }
      ],
      selectedIds: []
    }
  },
  computed: {
    selectAll: {
      get() {
        return this.selectedIds.length === this.products.length
      },
      set(val) {
        this.selectedIds = val 
          ? this.products.map(p => p.id) 
          : []
      }
    }
  }
}
</script>

自定义多选组件封装

封装可复用的多选组件，通过 v-model 实现双向数据绑定。

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

<script>
export default {
  props: {
    options: Array,
    value: Array
  },
  methods: {
    isSelected(val) {
      return this.value.includes(val)
    },
    toggleSelect(val) {
      const newValue = [...this.value]
      const index = newValue.indexOf(val)

      index === -1 
        ? newValue.push(val) 
        : newValue.splice(index, 1)

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

<style>
.select-item {
  padding: 8px;
  border: 1px solid #eee;
  cursor: pointer;
}
.selected {
  background-color: #42b983;
  color: white;
}
</style>

使用第三方库增强功能

对于复杂需求，可引入如 vue-multiselect 等专业组件库。

vue 实现列表多选

安装依赖：

npm install vue-multiselect

基础用法示例：

<template>
  <multiselect
    v-model="selected"
    :options="options"
    :multiple="true"
    :close-on-select="false"
    placeholder="选择项目"
  ></multiselect>
</template>

<script>
import Multiselect from 'vue-multiselect'
export default {
  components: { Multiselect },
  data() {
    return {
      selected: [],
      options: ['选项1', '选项2', '选项3']
    }
  }
}
</script>