Element table 翻页多选
需求: 列表页面导出excel数据,需要支持多页导出
思路如下:
1 所有选中的数据存到一个数组中 selectDataArrL
2 切换 currentPage(页码) 或 pageSize(条数) 的时候 给当前数据添加选中状态 this.$refs.multipleTable.toggleRowSelection()
3 整理需要导出的数据
实现步骤:
1. 存储选中的内容
<el-table :data="list" border stripe highlight-current-row
@select-all="selectAll" // 全选
height="480px"
@select="selectChange" // 单选
ref="multipleTable"
style="width: 100%;">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column v-for="item in tableHeadData" :label="item.name" :width="item.width" v-if="item.isShow">
<template slot-scope="scope">
<span>{{scope.row[item.value]}}</span>
</template>
</el-table-column>
</el-table>
// 单独选择
selectChange (arr,row) {
// 判断选中数据中是否包含当前的row
let isHaveItem = this.selectDataArrL.find(item => item.id== row.id)
if (isHaveItem) {
this.selectDataArrL = this.selectDataArrL.filter(item => item.id != isHaveItem.id)
} else {
this.selectDataArrL.push(row)
}
},
// 全选
selectAll (arr) {
// 判断全选选中数据是否为空
if (arr.length > 0) {
this.selectDataArrL = this.selectDataArrL.concat(arr)
} else {
arr.forEach(ms => {
this.selectDataArrL = this.selectDataArrL.filter(item => item.id!= ms.id)
})
}
},
2. 实现选中内容打勾✔状态;切换页码或者条数重新请求数据
let data = {
currentPage: this.currentPage,
pageSize: this.pageSize,
}
axios.post(url, data).then((response) => {
// this.list 是返回当前页的数据
this.list = response.data.data.records
// this.totalSize = response.data.data.total
if (this.selectDataArrL.length > 0) {
this.$nextTick(function () {
this.selectDataArrL.forEach(item => {
this.list.forEach(listitem => {
if (item.id == listitem.id) {
this.$refs.multipleTable.toggleRowSelection(listitem, true)
}
})
})
})
}
})
3. 导出数据整理
let ids = []
vm.selectDataArrL.forEach(item => {
// 如果页面中先单选3条数据,后全选10条数据,就会存起来13条数据;取消全选会全部取消13条
// 导出数据整理,通过判断去除重复数据
if (ids.indexOf(item.id) < 0) {
ids.push(item.id)
}
})