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=" 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)
    }
})