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()
}
相关推荐
杰~JIE5 分钟前
前端工程化概述(初版)
前端·自动化·工程化·前端工程化·sop
程序员_三木5 分钟前
使用 Three.js 创建圣诞树场景
开发语言·前端·javascript·ecmascript·three
赵大仁34 分钟前
深入理解 Vue 3 中的具名插槽
前端·javascript·vue.js·react.js·前端框架·ecmascript·html5
一雨方知深秋39 分钟前
v-bind 操作 class(对象,数组),v-bind 操作 style
前端·css·vue.js·html·style·class·v-bind
安晴晚风2 小时前
从0开始在linux服务器上部署SpringBoot和Vue
linux·运维·前端·数据库·后端·运维开发
前端小小王3 小时前
pnpm、Yarn 和 npm 的区别?
前端·npm·node.js
supermapsupport3 小时前
使用npm包的工程如何引入mapboxgl-enhance/maplibre-gl-enhance扩展包
前端·webpack·npm·supermap·mapboxgl
牛奔3 小时前
windows nvm 切换node版本后,npm找不到
前端·windows·npm·node.js
鱼大大博客3 小时前
Edge SCDN酷盾安全重塑高效安全内容分发新生态
前端·安全·edge
鸭梨山大。3 小时前
NPM组件包 vant部分版本内嵌挖矿代码
前端·安全·npm·node.js·vue