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,pageSizehandleCurrentChange(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>