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()
}
相关推荐
cool32007 分钟前
4D实验八:Dubbo微服务 + 注册中心
前端·kubernetes
军军君0118 分钟前
数字孪生监控大屏实战模板:商圈大数据监控
前端·javascript·vue.js·typescript·前端框架·echarts·three
方安乐33 分钟前
try catch vs 异步捕获
前端·javascript·vue.js
chenbin___40 分钟前
鸿蒙RN position: ‘absolute‘ 和 zIndex 的兼容性问题(转自千问)
前端·javascript·react native·harmonyos
晴天丨42 分钟前
Vue 3项目架构设计:从2200行单文件到24个组件
前端·vue.js
blanks202043 分钟前
为 Zed 编辑器 添加 flutter dart snippets
前端·flutter
Ruihong44 分钟前
你的 Vue 3 defineAsyncComponent(),VuReact 会编译成什么样的 React?
vue.js·react.js·面试
Ruihong1 小时前
你的 Vue 路由,VuReact 会编译成什么样的 React 路由?
vue.js·react.js·面试
Hello--_--World1 小时前
Js面试题目录表
开发语言·javascript·ecmascript
慧一居士1 小时前
Vue中的 h 作用和使用方法介绍
前端·vue.js