【已解决】el-table 前端分页多选、跨页全选等

由于element-ui的自定义header一直不生效（当type未selection时slot / rende-header 都不生效），所以还是使用element-ui原生API去做。

示例

代码

el-tablerow-key属性是必要的。

<template><div><el-tableref="table":data="tableDataFilter"style="width:100%"row-key="id"height="500"@select="handleSelect"@select-all="handleSelectAll"><el-table-columntype="selection"width="55"></el-table-column><el-table-columntype="index"width="50"label="序号"/><el-table-columnprop="name"label="姓名"width="120"/><el-table-columnprop="age"label="年龄"width="80"sortable/><el-table-columnprop="email"label="邮箱"min-width="180"/><el-table-columnprop="city"label="城市"width="100"/><el-table-columnprop="occupation"label="职业"width="150"/><el-table-columnprop="joinDate"label="加入日期"width="120"/></el-table><el-pagination:current-page.sync="currentPage":page-sizes="[10, 20, 50]":page-size.sync="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"@size-change="handleSizeChange"@current-change="handleCurrentChange"></el-pagination></div></template><script>exportdefault{data(){return{// 存放完整数据tableData:[],multipleSelection:[],currentPage:1,pageSize:10,/* 选择Set 是因为在这个场景使用起来比较方便，也能优化些许性能。 如果需要使用watch来监听selectedIds 的变化，可以改用为数组。 如改用数组 select等方法中的判断就需要相对繁琐。 或是对Set 进行包装。 */selectedIds:newSet(),isSelectAll:false};},computed:{total(){returnthis.tableData.length},// 前端分页tableDataFilter(){consts=(this.currentPage-1)*this.pageSize,e=s+this.pageSizereturnthis.tableData.slice(s,e)}},// 默认全选；如果有需要；此代码可以放在接口调用数据赋值后asyncmounted(){awaitthis.$nextTick()this.handleSelectAll()},methods:{// 当勾选状态改变做后续的逻辑处理change(){// 已选中列表constselectList=this.tableData.filter(x=>this.selectedIds.has(x.id))// do something...},// 勾选/取消单行handleSelect(selection,row){if(this.selectedIds.has(row.id)){this.selectedIds.delete(row.id)}else{this.selectedIds.add(row.id)}this.checkStatus()// 因为 Set 数据结构 不能够被Vue所监听到// 所以在每次修改选中状态之后手动调用一次callbackthis.change()},checkStatus(){this.isSelectAll=this.selectedIds.size===this.total},// 全选事件handleSelectAll(){// 当前是全选状态 -> 全部取消if(this.isSelectAll){this.selectedIds.clear()this.$refs.table?.clearSelection?.()}else{this.tableData.forEach(x=>{this.selectedIds.add(x.id)// ?. 在每次调用接口会清楚选中状态；防止在created中调用接口时table dom还未挂载。this.$refs.table?.toggleRowSelection?.(x,true)})}this.checkStatus()this.change()},handleSizeChange(){this.setSelection()},handleCurrentChange(){this.setSelection()},// 分页切换 -> 处理当前页面勾选状态asyncsetSelection(){awaitthis.$nextTick()consttableRef=this.$refs.tableif(!tableRef)returnthis.tableData.forEach(x=>{tableRef.toggleRowSelection(x,this.selectedIds.has(x.id))})},},};</script>