el-table当页选择和全选整套完整逻辑

1、html

绑定两个事件@selection-all和@select

<el-table ref="listTable" :data="data.list" @selection-all="selectionChangeFn" @select="selectFn"><el-table-column type="selection" width="55" />
</el-table>

2、当页选择和全选事件

<el-checkbox v-model="checkPage" @change="checkPageFn">当页</el-checkbox>
<el-checkbox v-model="checkAllPage" @change="checkAllPageFn">全选</el-checkbox>

3、执行方法

单页或者单个就获取的是列表中的id，使用ids存储，全选则传checkAllPage为true即可

    // 当页        checkPageFn(val) {this.ids = []if (val) {this.checkAllPage = false}this.data.list.forEach(row => {this.$refs.listTable.toggleRowSelection(row, val)if (val) {this.ids.push(row.id)}})},// 全选checkAllPageFn(val) {if (val) {this.checkPage = false}this.data.list.forEach(row => {this.$refs.listTable.toggleRowSelection(row, val)})},selectionAllFn(val) {this.ids = val.map(v => v.id);this.checkPage = val.length > 0;this.checkAllPage = false;},selectFn(val) {this.ids = val.map(v => v.id);this.checkPage = falsethis.checkAllPage = false},

4、提交校验

submit(){if (this.ids?.length<1 && !this.checkAllPage ) {return this.$message.error('请选择需要导出的数据')}
}