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()
}
相关推荐
zopple1 分钟前
前端三剑客 vs Vue.js:核心区别解析
前端·javascript·vue.js
hsjcjh1 分钟前
窗口函数-详细讲解分析
java·服务器·前端
CDN3602 分钟前
【踩坑实录】前端开发必看:一次由CSS缓存引发的线上事故与SEO反思
前端·css·缓存
胡志辉的博客8 分钟前
本地明明好好的,怎么一上线就跨域了?把同源策略、前后端分工和 CORS 一次讲明白
前端·javascript·vue.js·reactjs·nextjs·跨域
|晴 天|10 分钟前
文章系列管理系统:拖拽排序与进度追踪
前端·vue.js·typescript
GISer_Jing16 分钟前
AI Agent接口终局:MCP有弊端,CLI凭什么成为主流?
前端·人工智能
jiayong2333 分钟前
第 17 课:任务选择与批量操作
开发语言·前端·javascript·vue.js·学习
keyipatience36 分钟前
3.Linux基本指令2
前端·html
Hhang36 分钟前
从 ERP 系统出发,我是如何设计一套 LLM 多 Agent 系统的(二)
前端·人工智能·agent
源码老李40 分钟前
Day 07 · 游戏也要管理状态:场景切换·资源加载·对象池实战
前端·javascript·游戏