``` <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> ```