当前位置：首页 > VUE

vue 实现多选全选

2026-02-20 14:22:56VUE

Vue 实现多选全选功能

多选全选功能在表格或列表中很常见，以下是实现方法：

基础实现

定义数据模型

data() {
return {
 items: [
   { id: 1, name: 'Item 1', selected: false },
   { id: 2, name: 'Item 2', selected: false },
   { id: 3, name: 'Item 3', selected: false }
 ],
 selectAll: false
}
}

全选逻辑

vue 实现多选全选

methods: {
toggleSelectAll() {
 this.items.forEach(item => {
   item.selected = this.selectAll
 })
}
}

模板部分

<template>
<div>
 <label>
   <input type="checkbox" v-model="selectAll" @change="toggleSelectAll">
   全选
 </label>

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

高级实现（带反向检查）

计算属性检查全选状态

vue 实现多选全选

computed: {
selectAll: {
 get() {
   return this.items.length > 0 && this.items.every(item => item.selected)
 },
 set(value) {
   this.items.forEach(item => {
     item.selected = value
   })
 }
}
}

简化模板

<template>
<div>
 <label>
   <input type="checkbox" v-model="selectAll">
   全选
 </label>

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

表格场景实现

表格结构实现

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

获取选中项方法

methods: {
getSelectedItems() {
 return this.items.filter(item => item.selected)
}
}

注意事项

当使用v-for渲染列表时，确保为每个元素设置唯一的key属性
大型数据集考虑性能优化，可能需要使用虚拟滚动
选中状态变化可以触发watch监听器执行后续操作

标签: 全选多选

分享给朋友：

vue 实现列表多选

Vue 实现列表多选的方法使用 v-model 绑定数组通过 v-model 绑定一个数组，可以自动处理多选逻辑。适用于复选框（checkbox）场景。 <template> &…

js 实现全选

实现全选功能的方法使用 JavaScript 实现全选功能通常需要操作复选框（checkbox）的状态。以下是几种常见的实现方式。通过 DOM 操作实现全选 // 获取全选复选框和子复选框 co…

js 多选实现

实现多选的 JavaScript 方法使用复选框（Checkbox）实现多选通过 HTML 的 checkbox 元素配合 JavaScript 实现多选功能。用户可以选择多个选项，提交时获取所有…

jquery全选

jQuery实现全选功能的方法使用jQuery实现全选功能可以通过监听复选框的点击事件，动态控制其他复选框的状态。以下是几种常见实现方式：基础全选/取消全选通过监听全选复选框的chan…

vue实现多选互斥

Vue 实现多选互斥的方法多选互斥指的是在多个选项中，允许选择多个选项，但某些选项之间不能同时被选中。以下是几种实现方式：使用计算属性和监听器通过计算属性和监听器动态控制选项的互斥逻辑。定义一…

vue怎么实现多选

使用 v-model 绑定数组实现多选在 Vue 中，可以通过 v-model 绑定一个数组来实现多选功能。当用户选择多个选项时，选中的值会自动添加到数组中。 <template>…

vue 实现多选全选