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()
}
相关推荐
OpenTiny社区21 分钟前
以界面重构文字,GenUI 正式发布!
前端·vue.js·ai编程
yuki_uix29 分钟前
深入理解 JavaScript 的 this:从困惑到掌握的完整指南
前端·javascript
小贤哥29 分钟前
死磕这几道js手写题
前端·程序员
Lee川31 分钟前
🌐 深入 Chrome 浏览器:从单线程到多进程架构的进化之路
前端·架构·前端框架
学以智用34 分钟前
Vue 3 项目核心配置文件详解
前端·vue.js
工边页字36 分钟前
AI 开发必懂:Context Window(上下文窗口)到底是什么?
前端·人工智能·后端
Mr_Swilder38 分钟前
intel显卡本地部署大模型
前端
yuki_uix38 分钟前
Promise 与 async/await:从回调地狱到优雅异步的演进之路
前端·javascript
over69742 分钟前
📸《拍照记单词》—— 从零到上线的完整开发指南(超详细版)
前端·人工智能·产品
毛骗导演43 分钟前
万字解析 OpenClaw 源码架构-架构概览
前端·架构