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()
}
相关推荐
boooooooom25 分钟前
别再用错 ref/reactive!90%程序员踩过的响应式坑,一文根治
javascript·vue.js·面试
德育处主任26 分钟前
『NAS』一句话生成网页,在NAS部署UPage
前端·javascript·aigc
前端老兵AI27 分钟前
前端工程化实战:Vite + ESLint + Prettier + Husky 从零配置(2026最新版)
前端·vite
bluceli28 分钟前
浏览器渲染原理与性能优化实战指南
前端·性能优化
张元清29 分钟前
Astro 6.0:被 Cloudflare 收购两个月后,这个"静态框架"要重新定义全栈了
前端·javascript·面试
凉拌西红柿31 分钟前
如何用工具定位性能瓶颈
前端
青青家的小灰灰32 分钟前
深入理解 async/await:现代异步编程的终极解决方案
前端·javascript·面试
阿懂在掘金34 分钟前
早点下班(Vue2.7版):旧项目也能少写 40%+ 异步代码
前端·vue.js·开源
Mintopia34 分钟前
Web性能测试流程全解析:从概念到落地的完整指南
前端·性能优化·测试
用户5757303346241 小时前
JavaScript 原型继承全解析:从 call/apply 到寄生组合式继承
javascript