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 分钟前
React-深度拆解 React路由:从实战进阶到底层原理
前端·react.js·面试
不甜情歌2 分钟前
搞懂 Promise:告别回调嵌套,再也不怕异步代码乱成麻
前端·javascript
野草arthas5 分钟前
什么是视觉层次?为什么需要它?
前端
发现一只大呆瓜17 分钟前
React-手把手带你实现 Keep-Alive 效果
前端·react.js·面试
酉鬼女又兒38 分钟前
入门前端CSS 媒体查询全解析:从入门到精通,打造完美响应式布局(可用于备赛蓝桥杯Web应用开发)
前端·css·职场和发展·蓝桥杯·前端框架·html5·媒体
Dxy12393102161 小时前
HTML常用标签详解
前端·html
毛骗导演1 小时前
@tencent-weixin/openclaw-weixin 插件深度解析(一):认证与会话管理机制
前端·架构
spencer_tseng1 小时前
Vue node_modules
javascript·vue.js
wefly20171 小时前
告别本地环境!m3u8live.cn一键实现 M3U8 链接预览与调试
前端·后端·python·音视频·m3u8·前端开发工具
SuperEugene1 小时前
前端 console 日志规范实战:高效调试 / 垃圾 log 清理与线上安全避坑|编码语法规范篇
开发语言·前端·javascript·vue.js·安全