elementUi Table Pagination 分页 实现分页多选

列表页面导出excel数据，需要支持多页导出

思路如下:

1 所有选中的数据存到一个数组中  selectDataArrL

2 切换 currentPage(页码) 或 pageSize(条数) 的时候 给当前数据添加选中状态  this.$refs.multipleTable.toggleRowSelection()

3 整理需要导出的数据

实现步骤:

1. 存储选中的内容

　　

// 单独选择
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

 

转载于:https://www.cnblogs.com/star-x/p/10901561.html