### 實現方法：一般明細表數據都不會太多，一次請求完所有數據，再通過`slice`方法截取（起始為上一頁數據，結束為下一頁數據） ``` <el-table border :data="formData.slice((page5.currentPage-1)*page5.pageSize,page5.currentPage*page5.pageSize)" ref="table" style="width: 98%;margin:10px auto" row-key="id" :header-cell-style="{ background: 'rgb(248,248,249)', 'font-size': '12px', 'font-weight': 'normal', color: '#606266' }" > <el-table-column prop="fileCode" label="編號"> <template slot-scope="scope"> <el-input v-model="scope.row.fileCode"></el-input> </template> </el-table-column> <el-table-column prop="fileName" label="名稱"> <template slot-scope="scope"> <el-input v-model="scope.row.fileName"></el-input> </template> </el-table-column> </el-table> <!-- 分頁按鈕 --> <div style="text-align:right;margin-top:10px"> <el-pagination background @size-change="handleChangeSize" @current-change="handleChangeCurrent" :current-page.sync="page5.currentPage" :page-sizes="[2, 5, 10, 20, 50]" :page-size="page5.pageSize" layout="total,sizes, prev, pager, next, jumper" :total="page5.totalResult" ></el-pagination> </div> export default { data() { return { page5: { currentPage: 1, pageSize: 2, totalResult: 0 }, //表格查詢請求信息 queryInfo: { desc: "true", page: 1, row: 10, }, formData: [], }, created() { this.getData(); }, methods: { // 獲取表格數據 getData() { fileViewList(this.queryInfo) .then(res => { if (res.code === 200) { this.formData = res.data.list; this.page5.totalResult = res.data.total; } else { this.$message.error(res.message); } }) .catch(err => { console.log(err.message); }); }, // 切換分頁 handleChangeCurrent(val) { this.page5.currentPage = val; }, // 更換每頁條數 handleChangeSize(val) { this.page5.pageSize = val; } } }; ```