elementUi Table Pagination 分頁 實現分頁多選

列表頁面導出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) {
　　// 判斷存數據數組是否為空,進而進行刪除和添加的判斷
    if (this.selectDataArrL.length > 0) {
        this.selectDataArrL.forEach((item, index) => {
            if (item.fulfillmentControl == row.fulfillmentControl) {
                this.selectDataArrL.splice(index,1)
            } else {
                this.selectDataArrL.push(row)
            }
        })
    } else {
        this.selectDataArrL.push(row)
    }
},

　　

// 全選
selectAll (arr) {
　　// 判斷全選選中數據是否為空
    if (arr.length > 0) {
        this.selectDataArrL = this.selectDataArrL.concat(arr)
    } else {
        this.selectDataArrL.forEach((item,index) => {
            this.list.forEach(ms => {
                if (item.fulfillmentControl == ms.fulfillmentControl) {
                    this.selectDataArrL = this.selectDataArrL.filter(item => item.fulfillmentControl != ms.fulfillmentControl)
                }
            })
        })
    }
},

　　

2. 實現選中內容打勾✔狀態;切換頁碼或者條數重新請求數據

let data = {
    currentPage: this.currentPage,
    pageSize: this.pageSize,
}
axios.post(url, data).then((response) => {
　　// 嘗試同步賦值無效,然后采用延時賦值
　　// this.list 代表列表數據
    setTimeout(() => {
        this.selectDataArrL.forEach(item =>{
            this.list.forEach(listitem => {
                if (item.fulfillmentControl == listitem.fulfillmentControl) {
                    this.$refs.multipleTable.toggleRowSelection(listitem, true)
                }
            })
        })
    },0)
})

　　

3. 導出數據整理

let ids = []
vm.selectDataArrL.forEach(item => {
　　// 如果頁面中先單選3條數據，后全選10條數據,就會存起來13條數據；取消全選會全部取消13條
   // 導出數據整理，通過判斷去除重復數據
    if (ids.indexOf(item.fulfillmentControl) < 0) {
        ids.push(item.fulfillmentControl)
    }
})

　　

 原鏈接： https://www.cnblogs.com/guozongzhang/p/10653320.html