el-table全部选择和全部取消

hibiscusxin

已于 2023-12-05 17:42:53 修改

阅读量4.5k

点赞数 12

分类专栏： element 文章标签： vue.js javascript 前端

于 2023-12-05 14:56:11 首次发布

本文链接：https://blog.csdn.net/qq_41838435/article/details/134807568

版权

element 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何在ElementUI的el-table组件中使用自带方法toggleAllSelection()和clearSelection()来实现表格的全选和反选功能，通过点击按钮触发相应的函数进行操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-table实现全部选择和全部取消

在这里插入图片描述

其实非常简单，el-table自带的都有方法toggleAllSelection()和clearSelection()

具体代码如下：

<el-button type='success' @click='checkAll' size='small'>全选</el-button>
<el-button type='success' @click='cancelAll' size='small'>反选</el-button>

// 全选
checkAll() {
	// 因为toggleAllSelection()是改变选中状态，这里我们要的是全选中，所以先对其进行清空，再选中，就是全选啦
	this.$refs.table.clearSelection()
    this.$refs.table.toggleAllSelection()
}
// 反选
cancelAll() {
    this.$refs.table.clearSelection()
}