Explanation of El table paging select all function

Today, I will learn one with you el-table  Paged select all function

We were using the el-table Component time , You will definitely use the paging function , Whether it's long list drop-down paging or element-UI Of el-pagination Pagination .

But we are in the process of selecting el-table When , There will be a problem , After clicking to page , The previously selected data is gone , This problem really bothers me for a long time .

In the back, I started to develop for Baidu , Did you find one bug This method is ：

stay el-table in , adopt  @selection-change=“handleRowSelection”  and  :row-key=“getRowKeys”,

In the first line , That is, on the column of the multi selection box , add  :reserve-selection="true", Go straight to the code , For your reference only .

<template>  <div>    <el-table      ref="table"      :data="tableData"      size="small"      height="100%"row-key=“id”      @selection-change="handleSelectChange"      @select="handleSelect"    >      <el-table-column width="50" type="selection" />      <el-table-column type="index" label=" Serial number " width="50">        <template scope="scope">          <span>{{            (pageInfo.pageNo - 1) * pageInfo.pageSize + scope.$index + 1          }}</span>        </template>      </el-table-column>      <el-table-column label=" name 1" />      <el-table-column label=" name 2" />      <el-table-column label=" name 3" />      <el-table-column label=" name 4" />      <el-table-column label=" name 5" />    </el-table>  </div></template><script>export default {  data() {    return {      tableData: [],      selectedObj: {},      selectedData: []    }  },  methods: {    getList() {      //  Where to look up data , Process page selection status       this.handleRowSelection(this.tableData)    },    handleSelectChange(selection) {      //  Select all to cancel , Delete all data of the current page       if (selection.length === 0) {        this.tableData.forEach(item => {          delete this.selectedObj[item.id]        })      }      //  Tick data   add to       selection.forEach(item => {        this.selectedObj[item.id] = item      })      //  Get the data checked in all pages       this.selectedData = []      for (const key in this.selectedObj) {        this.selectedData.push(this.selectedObj[key])      }    },    handleSelect(selection, row) {      //  When a single check is cancelled , Delete the corresponding attribute       if (!selection.some(item => item.id === row.id)) {        delete this.selectedObj[row.id]      }    },    //  Process the current list selection status     handleRowSelection(data) {      data.forEach(item => {        if (this.selectedObj[item.id]) {          this.$nextTick(() => {            this.$refs.table.toggleRowSelection(item)          })        }      })    }  }}</script>

The source code attachment has been packaged and uploaded to Baidu cloud , You can download it yourself ～

 link : https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27 Extraction code : yu27

Baidu cloud link is unstable , It may fail at any time , Let's keep it tight .

If Baidu cloud link fails , Please leave me a message , When I see it, I will update it in time ～

Open source address

Code cloud address ：
http://github.crmeb.net/u/defu

Github Address ：
http://github.crmeb.net/u/defu