vue element ui 表格带分页全选情况
1. 效果
2. 原理
我们真实的情况,选择一条或者多条,将选择的id拼接成一个id数组传给后端,但是问题,如果数据过多的话,全选加入有4-5W条数据传递起来很费力而且可能会出错。和后端商量,当全选选择全部数据时,我们前端只传递一个参数,用这个参数表示选择全部即可。但是问题来了,前端的样式需要我们来进行调整。实现要求,点击了全选之后,切换下一页,也必须是全选的。实际实现请参考具体简单代码例子,实际业务数据等还需自己增加。
<template>
<div>
<div>
<el-table :data="tabledata" border style="width:100%" @selection-change="selRow" ref="multipleTable" :row-key="getRowKeys">
<el-table-column type="selection" min-width="55" align="center" :reserve-selection="true"></el-table-column>
<el-table-column prop="num" label="id" min-width="120" align="center"></el-table-column>
<el-table-column prop="name" label="名称" min-width="300" align="center"></el-table-column>
<el-table-column prop="time" label="时间" min-width="300" align="center"></el-table-column>
</el-table>
</div>
<el-checkbox label="全选" :indeterminate="isIndeterminate" v-model="checkAll" @change="selAll()"></el-checkbox>
<el-pagination
@size-change="handlePageSize"
@current-change="handleCurrentPage"
:current-page="currentPage"
:page-sizes="[3, 5]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
<el-button @click="btn">打印</el-button>
</div>
</template>
<script>
export default {
data() {
return {
selectedAssetsList: [], // 该数组对象
assetsUidList: [], // 下标值
currentPage: 1,
pageSize: 3,
total: 8,
isIndeterminate: false, // 对el-checkbox控制不完整的全选状态
checkAll: false, // 对el-checkbox控制全选状态
tabledata: [],
newTabledata: [
// el-table的数据内容
{
id: 1,
num: '20210001',
name: '小明',
time: '2021-01-10'
},
{ id: 2, num: '20210003', name: '打发', time: '2019-10-14' },
{
id: 3,
num: '20210002',
name: '花花',
time: '2021-01-10'
},
{
id: 4,
num: '201903123350',
name: '的飞洒',
time: '2019-10-16'
},
{
id: 5,
num: '201903123345',
name: '撒打发',
time: '2019-10-10'
},
{ id: 6, num: '201903123346', name: '供应商推荐', time: '2019-10-14' },
{
id: 7,
num: '201903123348',
name: '企鹅窝若',
time: '2019-10-15'
},
{
id: 8,
num: '201903123350',
name: '很多个',
time: '2019-10-16'
}
]
}
},
mounted() {
this.search()
},
methods: {
// 获取row的key值
getRowKeys(row) {
return row.id
},
handlePageSize(pageSize) {
this.pageSize = pageSize
this.search()
},
handleCurrentPage(currentPage) {
this.currentPage = currentPage
this.search()
},
search() {
this.tabledata = this.newTabledata.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
},
btn() {
console.log(this.selectedAssetsList)
console.log(this.assetsUidList)
},
// 全选按键功能实现
selAll() {
console.log(this.$refs.multipleTable.selection.length)
if (this.$refs.multipleTable.selection.length < this.newTabledata.length) {
// 判断勾选的数据是否是 大于 全选的数据 ,如果 小于则 让 全选 等于 true 否则为 false
this.checkAll = true
} else {
this.checkAll = false
}
if (this.checkAll) {
this.newTabledata.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row, true)
})
} else {
this.$refs.multipleTable.clearSelection()
this.selectedAssetsList = []
this.assetsUidList = []
}
},
stateChange() {
var vm = this
if (vm.assetsUidList.length < this.newTabledata.length && vm.assetsUidList.length > 0) {
this.isIndeterminate = true
} else if (vm.assetsUidList.length === this.newTabledata.length) {
this.isIndeterminate = false
this.checkAll = true
} else if (vm.assetsUidList.length === 0) {
this.isIndeterminate = false
this.checkAll = false
}
},
// 表格内checkbox触发的全选按钮状态变化
selRow(val) {
const vm = this
// 选择的行的完整数据。
vm.selectedAssetsList = Array.from(new Set([...vm.selectedAssetsList, ...val]))
const currentArr = val.map(item => item.id)
const arr1 = [...vm.assetsUidList, ...currentArr]
vm.assetsUidList = Array.from(new Set(arr1))
const tableData = vm.tabledata.map(item => item.id)
const difference = tableData.filter(v => !currentArr.includes(v))
difference.forEach(item => {
if (vm.assetsUidList.indexOf(item) !== -1) {
vm.assetsUidList.splice(vm.assetsUidList.indexOf(item), 1)
}
})
// 把选中的行数据进行去重。
var list = vm.selectedAssetsList.filter(item => vm.assetsUidList.indexOf(item.id) !== -1)
for (var i = 0; i < list.length; i++) {
for (var j = i + 1; j < list.length; j++) {
if (list[i].id === list[j].id) {
list.splice(j, 1)
j--
}
}
}
setTimeout(() => {
this.stateChange()
}, 0)
}
}
}
</script>