el-table全部选择和全部取消

el-table实现全部选择和全部取消

其实非常简单,el-table自带的都有方法toggleAllSelection()和clearSelection()

具体代码如下:

html 复制代码
<el-button type='success' @click='checkAll' size='small'>全选</el-button>
<el-button type='success' @click='cancelAll' size='small'>反选</el-button>
js 复制代码
// 全选
checkAll() {
	// 因为toggleAllSelection()是改变选中状态,这里我们要的是全选中,所以先对其进行清空,再选中,就是全选啦
	this.$refs.table.clearSelection()
    this.$refs.table.toggleAllSelection()
}
// 反选
cancelAll() {
    this.$refs.table.clearSelection()
}
相关推荐
小奶包他干奶奶1 分钟前
将svg对象化,并动态修改svg图标的颜色、尺寸等
前端·html
Lee川12 分钟前
React 快速入门:Vue 开发者指南
前端·vue.js·react.js
进击的尘埃26 分钟前
基于 LangChain.js 的前端 Agent 工作流编排:Tool 注册、思维链可视化与多步推理的实时 DAG 渲染
javascript
用户61581396951632 分钟前
Elpis: 基于vue3+webpack5+nodejs搭建一个完整项目
前端
90后的晨仔38 分钟前
S C:\WINDOWS\system32> pnpm i -g openclaw@latest pnpm : 无法加载文件 C:\xx\A
前端
颜酱1 小时前
最小生成树(MST)核心原理 + Kruskal & Prim 算法
javascript·后端·算法
蜡台1 小时前
Node 版本管理器NVM 安装配置和使用
前端·javascript·vue.js·node·nvm
狂奔蜗牛飙车1 小时前
Day3:HTML5 基础标签:h1-h6、p、hr、br、a、img
前端·html·html5·html常用标签的使用方法
木斯佳1 小时前
前端八股文面经大全:腾讯前端暑期提前批一、二、三面面经(下)(2026-03-04)·面经深度解析
前端
bluceli1 小时前
前端国际化(i18n)实战指南:构建多语言应用的完整方案
前端