``` <template> <div> <!-- 表格跨页多选 --> {{arrSelection}} <el-table :data="tableData" ref="table" style="width: 50%" :row-key="getKey" border @selection-change="handleChangeSelection" > <el-table-column type="selection" width="55" reserve-selection > </el-table-column> <el-table-column prop="name" label="姓名" > </el-table-column> </el-table> <el-pagination @size-change="handleChangeSize" @current-change="handleChangeCurrent" :current-page.sync="paginationData.page" :page-sizes="[2, 5, 10, 20, 50]" :page-size="paginationData.page_size" layout="total,sizes, prev, pager, next, jumper" :total="total" > </el-pagination> </div> </template> <script> export default { data() { return { tableData: [ { name: "张三", id: 1 }, { name: "张三", id: 2 }, { name: "张三", id: 3 }, { name: "李四", id: 4 }, { name: "李四", id: 5 }, { name: "李四", id: 6 } ], total: 6, paginationData: { page: 1, page_size: 2 }, arrSelection: [] }; }, created() {}, methods: { getKey(row) { return row.id; }, // 当选择项发生变化时会触发该事件，selection就是选择的数据 handleChangeSelection(selection) { this.arrSelection = selection; }, handleChangeCurrent(val) { // console.log(val) this.paginationData.page = val; // 请求表格数据 }, handleChangeSize(val) { this.paginationData.page_size = val; console.log(val); } }, mounted() { // this.handleChangePagination(); } }; </script> <style scoped> </style> ```