问题描述：
el-table未提供真分页(每页数据由后端请求而来)的跨页全选 ，以下是前端的实现效果：点击全部子系统会选中所有页的全部数据
实现分析：
- 需要后端返回全部数据的id
- table外增加全选按钮来控制数据的选中状态
- 全选按钮的状态要根据选择的数据而具有半选、不选、全选三种状态
下面直接上代码大家就明白了
template部分
全选按钮
//el-table外部增加的全选按钮
<el-checkbox
:indeterminate="indeterminate"
:value="choiceAll"
@change="choiceAllChange">全部子系统</el-checkbox>
//el-table部分
<el-table
row-key="id"
ref="multipleTable"
:data="tableData"
@selection-change="handleSelectionChange"
@select="selectChange"
@select-all="selectAllChange"
>
<el-table-column type="selection" :reserve-selection="true" width="55">
</el-table>
js部分
export default {
data () {
tableDataId: [], // 全部的数据id,由后端进行返回[number,number]
choiceId: [], // 当前已选择的数据id
},
computed:{
// 是否为半选状态:当choiceId存在且choiceId小于全部的数据id时，应为半选状态
indeterminate () {
return !!(this.choiceId.length && this.choiceId.length < this.tableDataId.length)
},
// 是否为全选状态:当choiceId存在且choiceId等于全部的数据id时，应为全选状态
choiceAll () {
if (this.choiceId.length === this.tableDataId.length) {
return true
} else {
return false
}
}
},
methods:{
// 选择全部数据方法
choiceAllChange (value) {
if (value) {
this.choiceId = this.tableDataId
} else {
this.$refs.multipleTable.clearSelection()
this.choiceId = []
}
this.tableData.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(this.tableDataId.includes(row.id) ? row : {
}, value)
})
},
// 单独选择表格行事件
selectChange (selection, row) {
if (selection.some(item => item.id === row.id)) {
// 选中操作
this.choiceId.push(row.id)
} else {
this.choiceId = this.choiceId.filter(item => item !== row.id)
}
},
// 全选当前页数据的事件
selectAllChange (selection) {
const operationId = (selection.length ? selection : this.tableData).map(item => item.id)
if (selection.length) {
// 选中操作
this.choiceId = [...this.choiceId, ...selection.map(item => item.id)]
} else {
this.choiceId = this.choiceId.filter(item => !operationId.includes(item))
}
},
/*
自动选中表格数据（在请求完tableData以后使用）
参数data：请求成功的table数据
*/
selectTableData (data = []) {
this.$refs.multipleTable.clearSelection()
data.forEach(row => {
if (this.choiceId.includes(row.id)) {
// 当前数据为被选中状态
this.$refs.multipleTable.toggleRowSelection(row, true)
}
})
},
/*
当有数据被删除时候，要相应的从choiceId中删除，
此方法传入被删除的id，在删除数据成功后调用
*/
delId (ids) {
this.choiceId = this.choiceId.filter(id => !ids.includes(id))
},
}
}
结语：
根据以上代码可实现真分页跨页多选，但是要后端配合，若是涉及到数据量极大的时候，可能会造成查询全部id过慢，所以不推荐。
喜欢的话记得点赞、关注、收藏多多支持，有问题的话可以评论或私聊，会及时进行反馈！