### 实现方法：一般明细表数据都不会太多，一次请求完所有数据，再通过`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; } } }; ```