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()
}
相关推荐
荔枝一杯酸牛奶17 分钟前
HTML 表单与表格布局实战:两个经典作业案例详解
前端·html
Charlie_lll1 小时前
学习Three.js–纹理贴图(Texture)
前端·three.js
yuguo.im1 小时前
我开源了一个 GrapesJS 插件
前端·javascript·开源·grapesjs
安且惜1 小时前
带弹窗的页面--以表格形式展示
前端·javascript·vue.js
摘星编程2 小时前
用React Native开发OpenHarmony应用:NFC读取标签数据
javascript·react native·react.js
GISer_Jing2 小时前
AI驱动营销:业务技术栈实战(From AIGC,待总结)
前端·人工智能·aigc·reactjs
GIS之路4 小时前
GDAL 实现影像裁剪
前端·python·arcgis·信息可视化
AGMTI4 小时前
webSock动态注册消息回调函数功能实现
开发语言·前端·javascript
码界奇点4 小时前
基于SpringBoot+Vue的前后端分离外卖点单系统设计与实现
vue.js·spring boot·后端·spring·毕业设计·源代码管理
不会Android的潘潘4 小时前
受限系统环境下的 WebView 能力演进:车载平台 Web 渲染异常的根因分析与优化实践
android·java·前端·aosp