目录

使用vue实现分页

表单

分页模块

定义变量

定义返回给表单的数据

获取后端接口和有多少数据

---

使用vue实现分页

具体流程：首先我们获取后端接口数据，获取到的数据出存入tableData这个数组中，获取到的数据通过paginatedData这个方法，截取分页数据展示。然后我们使用element-ui提供的分页模块实现分页功能，可参考如下将定义的变量和分页模块中的数据绑定。

表单

<el-table :data="paginatedData" border height="750">

分页模块

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
:current-page.sync="currentPage" :page-size="pageSize" layout="total,sizes, prev, pager, next, jumper"
:total="total"></el-pagination>

定义变量

javascript">tableData: [],
currentPage: 1,pageSize: 10,total: 0,

定义返回给表单的数据

  computed: {paginatedData() {const start = (this.currentPage - 1) * this.pageSize;const end = start + this.pageSize;return this.tableData.slice(start, end);},},

获取后端接口和有多少数据

javascript">    getList() {lsgetall().then(response => {//获取response.data是一个数组如何获取this.tableData = response.data;this.total = this.tableData.length})},

Demo

这个demo没有测试过，主要做参考（提供思路）

javascript"><template><div><div style="margin: 10px;"><el-table :data="paginatedData" border height="750"><el-table-column label="id" width="90"><template slot-scope="scope">{{ scope.$index +=1 }}</template></el-table-column><el-table-column prop="license_key" label="license_key" width="320"></el-table-column><el-table-column prop="key_type" label="key_type" width="300"></el-table-column><el-table-column prop="addcart_discord_webhook" label="加车链接" width="300"></el-table-column><el-table-column prop="paysuccess_discord_webhook" label="成功链接" width="190"></el-table-column><el-table-column prop="payfailed_discord_webhook" label="失败链接" width="300"></el-table-column><el-table-column prop="hwid" label="机器码" width="300"></el-table-column></el-table><div class="center-container" style="margin-left: 30%;"><!-- 分页 --><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background:current-page.sync="currentPage" :page-size="pageSize" layout="total,sizes, prev, pager, next, jumper":total="total"></el-pagination></div></div></div>
</template><script>import { lsgetall } from '@/api/table';export default {data() {return {tableData: [],idDataRow: [],idDataRow1: [],input: '',//抽屉参数dialog: false,loading: false,//抽屉参数dialog1: false,loading1: false,currentPage: 1,pageSize: 10,total: 0,}},computed: {paginatedData() {const start = (this.currentPage - 1) * this.pageSize;const end = start + this.pageSize;return this.tableData.slice(start, end);},},methods: {},cancelForm() {this.loading = false;this.dialog = false;clearTimeout(this.timer);},getList() {lsgetall().then(response => {//获取response.data是一个数组如何获取this.tableData = response.data;this.total = this.tableData.length})},created() {this.getList();},}
</script><style scoped>
.demo-drawer__content {margin: 20px;
}
</style>