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>
