多选表格数据获取--入门

工具：vue+elementUI

//“数据获取”的思路：
//1.勾选数据，获取到此数据
//2.若换页，在换页时，将数据保存在[当前页-1]中（二维数组的保存方式）
//3.点击提交时，需将二维数组降维(看后端接收需求)

//“记忆选取”的思路
//1.勾选成功，获取当前数据的索引并保存在[当前页-1]中（二维数组的保存方式）
//2.换页回来时，遍历当前页的数据索引，自动勾选上次勾选的值

首先，将需要用到的表格绘制出来。
先附上表格初始化的数据格式。

   this.dataList = {
      data: [{
            date: '2016-05-02',
            name: '赵一',
            phone: '13067894531',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '贾二',
            phone: '13067894522',
            address: '上海市普陀区金沙江路 1517 弄'
          }], // 此处省略剩余10条
      pageInfo: {
        currentPage: 1,
        pageSize: 10,
        returnCode: 12
      }
    };

表格绘制如图。

表格.png

表格的代码：

<div class="table-contain">
    <el-table border :data="dataList.data" ref="multipleTable" style="width: 100%" 
    @select="handleSelectionChange" 
    @select-all="handleSelectionChange" 
    @selection-change="handleCheckedChange">
        <el-table-column type="selection" width="38px"></el-table-column>
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="name" label="员工姓名"></el-table-column>
        <el-table-column prop="phone" label="联系方式"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
      <el-row type="flex" justify="end" class="pagination-contain">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfoData.currentPage"
          :page-sizes="[10, 20]"
          :page-size="pageInfoData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="dataList.pageInfo.returnCode">
        </el-pagination>
      </el-row>
      <div class="dialog-footer" slot="footer" style="text-align:center;">
        <el-button type="primary" size="medium" @click="submit">确定</el-button>
        <el-button type="info" size="medium">取消</el-button>
      </div>
    </div>

第一步 "数据获取"

  data () {
    return {
      dataList: {},
      pageInfoData: { currentPage: 1, pageSize: 10 },
      lastCheckData: [], // 上次保存的值
      selectData: [], // 选中的数据索引
      checkList: [] // 临时选中的值
    }
  }

    handleCheckedChange(rows) { // 选中的数据获取
      this.checkList = []; // 初始化，防止重复添加
      if (rows) {
        rows.forEach(row => { // 遍历已选择的数据
          if (row) {
            this.checkList.push(row.name);
          }
        });
      }
      // console.log(this.checkList);
    },
    submit() { // 点击确定
      this.lastCheckData[this.pageInfoData.currentPage - 1] = this.checkList; // 保存当前页获取的值
      //降维 --- 二维数组降至一维数组
     // let getList = Array.prototype.concat.apply([], this.lastCheckData);   //  原始方法
     let getList = this.lastCheckData.flat(); // ES6方法 flat() “拉平”嵌套数组
      console.log(getList);
    },

第二步 "记忆选取"

   handleSelectionChange(selection, row) { // 选中的数据索引获取
      this.selectData[this.pageInfoData.currentPage - 1] = []; // 初始化
      this.dataList.data.forEach((item, index) => {
        for (let i = 0; i < selection.length; i++) { // 遍历已选的数据重新填充数组
          if (item.name === selection[i].name) {  //补充：注意这里的判断必须要保证判断的值是唯一的（不一定要拿获取的值进行比较，比如ID值），不然遍历的时候会都添加进去
            // console.log(index);
            this.selectData[this.pageInfoData.currentPage - 1].push(index);
          } 
        }
      });
      // console.log(this.selectData);
    },
    toggleSelection(rows) { // 判断是否选中
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

翻页的时候需加上

  this.lastCheckData[this.pageInfoData.currentPage - 1] = this.checkList; // 保存当前页获取的值
  this.pageInfoData.pageSize = val;
// 调完翻页查询的接口后，回调执行以下代码：
// 勾选上次已勾选的数据
      let arr = [];
      if (this.selectData[this.pageInfoData.currentPage - 1]) {
        this.selectData[this.pageInfoData.currentPage - 1].forEach((item, index) => {
          arr.push(this.dataList.data[item]);
        });
      }
     // setTimeout(() => {
      //  this.toggleSelection(arr);
      //}, 0);
      // ES6
      let setTime = new Promise((resolve, reject) => {
          resolve(arr);
        });
        Promise.all([setTime]).then((results) => {
          this.toggleSelection(arr);
        });

若有更好更简单完善的方法，欢迎大牛指点！
有问题的也可留言哦~

参考链接：
table配合分页+数据回显
table翻页的记忆功能