当前位置：首页 > 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 实现级联多选的方法使用 Element UI 的 Cascader 组件 Element UI 提供了 el-cascader 组件，支持多选功能。通过设置 props 的 multiple…

vue实现div多选

Vue 实现 Div 多选功能基础实现思路通过 Vue 的数据绑定和事件处理，可以轻松实现 div 的多选功能。核心是维护一个数组来存储选中的 div 的标识符，并通过 v-bind 和 v-on…

vue 实现列表多选

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

js 实现全选

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

jquery全选

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

vue实现列表全选

实现全选功能的基本思路在Vue中实现列表全选功能，通常需要结合v-model和计算属性来管理选中状态。全选按钮的状态与列表中所有项的选中状态相互关联。基础实现方法准备一个数据列表和对应的选中状…

vue 实现多选全选