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()
}
相关推荐
Ebin几秒前
Shopify 前端实战系列 · S02.5 - 开发者必看!一文搞懂 Shopify App Extension
前端
Justineo3 分钟前
TemPad Dev:设计与实现
前端·javascript·css
HuangYongbiao4 分钟前
Rspack 插件架构原理:从 Tapable 到 Rust Hook
前端·架构
llq_3504 分钟前
ReactDOM.createPortal 与 position: fixed 的本质区别
前端
AAA简单玩转程序设计12 分钟前
救命!HTML按钮点了没反应?3分钟学会给网页“装脑子”
javascript·html
Cache技术分享13 分钟前
231. Java 集合 - 将集合元素转换为数组
前端·后端
神秘的猪头15 分钟前
浏览器是如何渲染 HTML/CSS/JS 页面的?——从代码到像素的完整流程
前端·javascript
啷咯哩咯啷19 分钟前
el-table-v2 实现自适应列宽
前端·javascript·vue.js
3秒一个大20 分钟前
JavaScript 中 var、let 和 const 的区别与应用
javascript
jump68021 分钟前
为什么typeof null = 'object'
前端