需求： 列表頁面導出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)
}
})