el-table分页保留勾选的数据

1、目标效果

        代码全部写在下方App.vue中，复制粘贴即可运行 

       

        目前选中了5条数据

        

        点击下方切换分页，选中的数据消失了

  

2、原理

        （1）el-table复选框，用一个变量数组selectedRow:[ ] 监听选择了哪些数据

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

        el-table自身有监听表格中复选框变化的方法：@selection-change，回调函数参数为选中的表格数据 

<el-table :data="tableList" border style="width: 100%" @selection-change="val => selectedRow = val">

         （2）保存选中的数据：

        在el-table中添加行的标识 :row-key="val => val.date"，回调函数参数为表格每一行数据，这里最好选择能唯一标识每一行的数据作为key的返回值，否则保存选中失败

<el-table :row-key="val => val.date" :data="tableList" border style="width: 100%"
      @selection-change="val => selectedRow = val">

        在复选框上加上:reserve-selection="true" 

      <el-table-column :reserve-selection="true" type="selection" width="55"></el-table-column>

        （3）slice分页原理：

        这里没有请求后台获取数据，自己手动了个数组，通过slice进行切割，请求后台获取数据，上述方法也是可以翻页保存选中的数据。

        slice(start, end) : 返回一个新数组，不改变原来的数组，区间就是有头无尾[start, end)

        分页公式：slice( (页数-1) * 每页大小，页数 * 每页大小 )

        打个比方：

                页数 = 1，每页大小 = 5

                    slice(0, 5) =>  取的是数组索引为0,1,2,3,4元素，因为数组从0开始

                页数 = 2，每页大小 = 5

                    slice(5, 10) => 取的是索引为5,6,7,8,9元素

                .......

3、源码

<template>
  <div id="app">
    <div>已选中了条数: {{ selectedRow?.length }}</div>
    <el-table :row-key="val => val.date" :data="tableList" border style="width: 100%"
      @selection-change="val => selectedRow = val">
      <el-table-column :reserve-selection="true" type="selection" width="55"></el-table-column>
      <el-table-column type="index" width="55" label="序号"></el-table-column>
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="pageConfig.pageNum" :page-sizes="[1, 2, 5, 10]" :page-size="pageConfig.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="pageConfig.total">
    </el-pagination>
  </div>
</template>
 
<script>

export default {
  name: 'App',
  data() {
    return {
      pageConfig: {
        pageNum: 1,
        pageSize: 5,
        total: 0
      },
      selectedRow: [],
      tableData: [{
        date: '2016-05-01',
        name: '王小虎',
        address: '北京'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '广州'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '深圳'
      },
      {
        date: '2016-05-05',
        name: '王小虎',
        address: '杭州'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '武汉'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '长沙'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '佛山'
      }, {
        date: '2016-05-09',
        name: '王小虎',
        address: '东莞'
      }, {
        date: '2016-05-10',
        name: '王小虎',
        address: '成都'
      }],
      tableList: []
    }
  },
  created() {
    this.pageConfig.total = this.tableData.length;
    this.getList(this.pageConfig.pageNum, this.pageConfig.pageSize)
  },
  methods: {
    // 监听页面大小变化
    handleSizeChange(val) {
      this.getList(this.pageConfig.pageNum, val)
    },
    // 监听当前页变化 (currentPage-1)*pageSize,pageSize
    handleCurrentChange(val) {
      this.getList(val, this.pageConfig.pageSize)
    },
    // 获取表格数据
    getList(pageNum, pageSize) {
      this.tableList = this.tableData.slice((pageNum - 1) * pageSize, pageNum * pageSize)
    }
  }
}
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>