功能介绍：使用vue + elementUi表格，实现数据动态加载下的分页多选以及页面变动后记忆选择。

页面代码如下：

<el-table :data="tableData" ref="table" @selection-change="handleSelectionChange">

      <el-table-column type="selection"></el-table-column>

       <el-table-column prop="yname" label="姓名"></el-table-column>

       <el-table-column prop="idcard" label="身份证号"></el-table-column>

        <el-table-column prop="agencyName" label="所属机构"></el-table-column>

</el-table>

<el-pagination

       @current-change="handleCurrentChange"

       :current-page.sync="page.pageNum"

       :page-size="page.pageSize"

        layout="total, prev, pager, next , jumper"

         :total="page.pageTotal">

</el-pagination>

data方法里面的代码如下：

tableData: [], // 表格数据

multipleSelectionAll:[],//所有选中的数据包含跨页数据

multipleSelection:[],// 当前页选中的数据

idKey: 'yid', // 标识列表数据中每一行的唯一键的名称

page:{

     //每页数据量

     pageSize:15,

     //数据总数

     pageTotal:0,

     //当前页，从1开始

     pageNum:1,

}

methods逻辑代码如下：

methods: {

    //分页处理

    handleCurrentChange(val){

        this.query.pageNum = val;

        this.changePageCoreRecordData();

        this.initUser();

    },

   handleSelectionChange (val) {

        this.multipleSelection = val;

        //实时记录选中的数据

        setTimeout(()=>{

             this.changePageCoreRecordData();

        }, 20)

},

    /// 设置选中的方法

    setSelectRow() {

        if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {

        return;

    }

    // 标识当前行的唯一键的名称

    let idKey = this.idKey;

    let selectAllIds = [];

     let that = this;

     this.multipleSelectionAll.forEach(row=>{

           selectAllIds.push(row[idKey]);

    })

    this.$refs.table.clearSelection();

     for(var i = 0; i < this.tableData.length; i++) {

          if (selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {

               // 设置选中，记住table组件需要使用ref="table"

                this.$refs.table.toggleRowSelection(this.tableData[i], true);

          }

    }

   },

 

    // 记忆选择方法（核心部分）

    changePageCoreRecordData () {

        // 标识当前行的唯一键的名称

         let idKey = this.idKey;

          let that = this;

         // 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算

        if (this.multipleSelectionAll.length <= 0) {

              this.multipleSelectionAll = this.multipleSelection;

              return;

         }

        // 总选择里面的key集合

       let selectAllIds = [];

        this.multipleSelectionAll.forEach(row=>{

             selectAllIds.push(row[idKey]);

        })

        let selectIds = []

        // 获取当前页选中的id

        this.multipleSelection.forEach(row=>{

               selectIds.push(row[idKey]);

              // 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里

              if (selectAllIds.indexOf(row[idKey]) < 0) {

                    that.multipleSelectionAll.push(row);

               }

         })

         let noSelectIds = [];

         // 得到当前页没有选中的id

         this.tableData.forEach(row=>{

              if (selectIds.indexOf(row[idKey]) < 0) {

                         noSelectIds.push(row[idKey]);

               }

          })

          noSelectIds.forEach(id=>{

                 if (selectAllIds.indexOf(id) >= 0) {

                            for(let i = 0; i< that.multipleSelectionAll.length; i ++) {

                                     if (that.multipleSelectionAll[i][idKey] == id) {

                                          // 如果总选择中有未被选中的，那么就删除这条

                                          that.multipleSelectionAll.splice(i, 1);

                                           break;

                                       }

                                 }

                           }

             })

      },

 

    //初始化数据 分页获取的数据可以和写法可以根据自己需要修改

    async initUser(){

            const res = await getAdmin(this.query);

             if(res && res.data){

                      this.tableData = res.data.pageData ? res.data.pageData : [];

                      this.page.pageTotal = res.data.totalSize; //数据总数

                      // this.page.pageSize = 1;//每页数据量

                      // this.page.pageNum = res.data.pageNum;//当前页，从1开始

                     setTimeout(()=>{

                           this.setSelectRow();

                     }, 20)

         }

    },

 

     //保存  输出部分选择中的数据

     handleChooseData(){

           console.log(this.multipleSelectionAll)

     }

}

 

参考博客链接：https://www.cnblogs.com/wanglu/p/9160416.html