elementUI的table组件实现全选功能
需求：最近碰见一个需求，有三万多条数据,用户点击全选按钮，要将三万条数据全部选中。
template
<el-checkbox
v-model="datCheckAll"
style="float: right"
label="全选"
v-show="activeName == 'dat'"
:indeterminate="isIndeterminate"
@change="handleCheckAllDatChange"
border
></el-checkbox>
<el-row style="height: calc(100% - 40px)" v-show="activeName == 'dat'">
<el-table
style="width: 100%; margin: auto"
height="94.3%"
border
ref="table1"
:row-key="bid"
:data="DatTableData"
@selection-change="selectChange"
@select="selectSingleDat"
@select-all="selectAllDat"
>
<el-table-column
type="selection"
:reserve-selection="true"
></el-table-column>
<el-table-column
type="index"
align="center"
width="80px"
></el-table-column>
<el-table-column
prop="amodeldata"
sortable
label="基准"
></el-table-column>
<el-table-column
prop="bmodeldata"
sortable
label="待同步"
></el-table-column>
</el-table>
<!-- 分页区域 -->
<el-pagination
@size-change="handleSizeChange"
style="
background-color: #cccbcb;
width: 99.4%;
position: absolute;
bottom: 0px;
"
@current-change="handleCurrentChange"
:current-page="queryInfo.num"
:page-sizes="[100, 200, 500, 1000]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</el-row>
watch:监听
// 监听相同dat全选方法
datCheckAll(val) {
if (val) {
this.DatTableData.forEach((row, i) => {
this.$refs.table1.toggleRowSelection(row, true)
})
} else {
// 当点击全选按钮变为非选中状态，将当前所有的已经被
// 勾选中的数据改变状态
// this.datCheck.forEach((row) => {
// this.$refs.table1.toggleRowSelection(row, false)
// })
this.$refs.table1.clearSelection()
}
},
methods：
//获取第一页的一百条数据
async getDat() {
let { data: res } = await this.$axios.post(
'/datasync/datcontentquery',
JSON.stringify(this.map),
{
headers: {
'Content-Type': 'application/json;charset=UTF-8',
},
}
)
//将数据赋值给表格绑定数据，仅用来进行数据展示，该数据会被覆盖，不会在此数据只是进行操作。
this.DatTableData = res.datsame.content
this.total = res.datsame.totalElements
},
//获取所有数据
async getAllDat() {
let map = JSON.parse(JSON.stringify(this.map))
// 将total的真实值赋予datpagesize，调用一次函数将所有的dat数据获取到
map.datpagesize = this.total
let { data: res } = await this.$axios.post(
'/datasync/datcontentquery',
JSON.stringify(map),
{
headers: {
'Content-Type': 'application/json;charset=UTF-8',
},
}
)
this.allDatData = res.datsame.content //相同dat数据的全部数据
//将获取的所有数据的前100条数据重新赋值给表格，保持整个表格的数据来源一致。
this.DatTableData = this.allDatData.slice(0, 100)
},
//监听dat左侧表格选中数据
selectChange(val) {
//将当前选中的数据赋值给datCheck，在所有数据的全选按钮没有选中的情况下，最后计算时
// 的数据就是datCheck里面的数据
this.datCheck = val
},
// 对于当前页单选和全选按钮，在所有数据全选按钮没有选中的情况下，点击选中的数据会
// 经过‘selectChange’方法赋值给datCheck,当所有数据全选按钮选中的情况下，点击某条数据或
// 某几十条数据后，则将被选中的数据与datClick里面的数据进行对比，如果没有相同的数据，则将选
// 中的数据放进datClick数据里面，如果有形同的数据，则将被选中的数据从datClick里面取出来。
// 单击选择某一页dat表格数据的select方法
selectAllDat(selection) {
let DatTableDataId = this.DatTableData.map((ele) => {
return ele._id
})
let datClickId = this.datClick.map((ele) => {
return ele._id
})
if (this.isDatAllChecked) {
if (_.intersection(DatTableDataId, datClickId).length == 0) {
this.datClick = _.concat(this.datClick, this.DatTableData)
} else {
_.intersection(DatTableDataId, datClickId).forEach((element) => {
this.datClick.forEach((ele, i) => {
if (ele._id == element) {
if (this.datClick.indexOf(ele) !== -1) {
this.datClick.splice(this.datClick.indexOf(ele), 1)
}
}
})
})
}
}
},
// 单击选择一条dat表格数据的select方法
selectSingleDat(selection, row) {
// 只有当全选按钮被选中才执行下面代码，
// 没有选中时执行selectChange函数
// 判断当前行数据是否已经选中，若已经选中，再次点击时，从数组
// 中取出，若没有选中，再次点击，放进数组之中。
if (this.isDatAllChecked) {
let arr = this.datClick.map((ele) => {
return ele._id
})
if (!arr.includes(row._id)) {
this.datClick.push(row)
} else {
this.datClick.forEach((ele, i) => {
if (ele._id == row._id) {
if (this.datClick.indexOf(ele) !== -1) {
this.datClick.splice(this.datClick.indexOf(ele), 1)
}
}
})
}
}
},
// 监听dat同步按钮
async synchronization() {
// dat
let allDatDataCopy = JSON.parse(JSON.stringify(this.allDatData))
if (this.isDatAllChecked && this.datClick.length == 0) {
this.datCheck = allDatDataCopy
} else if (this.isDatAllChecked && this.datClick.length !== 0) {
this.datClick.forEach((element) => {
allDatDataCopy.splice(allDatDataCopy.indexOf(element), 1)
})
this.datCheck = allDatDataCopy
}
// 不同dat
let allDatDiffDataCopy = JSON.parse(JSON.stringify(this.allDatDiffData))
if (this.isDatDiffAllChecked && this.datDiffClick.length == 0) {
this.datDiffCheck = allDatDiffDataCopy
} else if (this.isDatDiffAllChecked && this.datDiffClick.length !== 0) {
this.datDiffClick.forEach((element) => {
allDatDiffDataCopy.splice(allDatDiffDataCopy.indexOf(element), 1)
})
this.datDiffCheck = allDatDiffDataCopy
}
// swi
let allSwiDataCopy = JSON.parse(JSON.stringify(this.allSwiData))
if (this.isSwiAllChecked && this.swiClick.length == 0) {
this.swiCheck = allSwiDataCopy
} else if (this.isSwiAllChecked && this.swiClick.length !== 0) {
this.swiClick.forEach((element) => {
allSwiDataCopy.splice(allSwiDataCopy.indexOf(element), 1)
})
this.swiCheck = allSwiDataCopy
}
// 不同dat
let allSwiDiffDataCopy = JSON.parse(JSON.stringify(this.allSwiDiffData))
if (this.isSwiDiffAllChecked && this.swiDiffClick.length == 0) {
this.swiDiffCheck = allSwiDiffDataCopy
} else if (this.isSwiDiffAllChecked && this.swiDiffClick.length !== 0) {
this.swiDiffClick.forEach((element) => {
allSwiDiffDataCopy.splice(allSwiDiffDataCopy.indexOf(element), 1)
})
this.swiDiffCheck = allSwiDiffDataCopy
}
// 更改数据格式
let arr = this.datCheck.map((ele) => {
let aid = ele.aid
let bid = ele.bid
let array = { aid: bid }
for (var key in array) {
var newKey = aid
array[newKey] = array[key]
delete array[key]
}
return array
})
this.$confirm(
'您要同步的数据为' +
this.datCheck.length +
'条数据',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(async () => {
if (arr.length > 10000) {
// 当arr长度超过1万，将其拆分一个每个元素包含一万个数据的数组
let num = arr.length / 10000
for (let i = 0; i < num; i++) {
this.dattb(
this.arraydat,
arr.slice(i * 10000, (i + 1) * 10000),
i
)
}
} else if (arr.length > 0 && arr.length <= 10000) {
this.arraydat.datlist = arr
await this.dattb(this.arraydat)
}
})
.catch((err) => {
// console.log(err)
this.$message({
type: 'info',
message: '已取消',
})
})
},
// dat全选按钮触发时调用
handleCheckAllDatChange(val) {
// 全选按钮选中时val为true,取消选中时val为false
this.isDatAllChecked = val
if (!val) {
// 当全选按钮变为非选中状态，datClick中的数据将失去作用，
// 当再次点击全选按钮变为全选状态时，datClick应该为空数组
this.datClick = []
}
},
// 监听分页方法
handleCurrentChange(newnum) {
this.queryInfo.num = newnum
this.DatTableData = this.allDatData.slice(
(newnum - 1) * this.queryInfo.pagesize,
newnum * this.queryInfo.pagesize
)
let datClickId = this.datClick.map((ele) => {
return ele._id
})
if (this.isDatAllChecked) {
this.DatTableData.forEach((row) => {
if (!datClickId.includes(row._id)) {
this.$refs.table1.toggleRowSelection(row, true)
}
})
}
},
// 监听pagesizel
handleSizeChange(newSize) {
this.queryInfo.num = 1
this.queryInfo.pagesize = newSize
this.DatTableData = this.allDatData.slice(0, newSize)
let datClickId = this.datClick.map((ele) => {
return ele._id
})
if (this.isDatAllChecked) {
this.DatTableData.forEach((row) => {
if (!datClickId.includes(row._id)) {
this.$refs.table1.toggleRowSelection(row, true)
}
})
}
},