ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

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

2026/9/15 6:47:00 拓冰建站 浏览量
el-table全部选择和全部取消

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()
}