# Vue、ElementUI 表格分页实现_综合

Vue—Element表格分页实现

后端Json数据返回如下：

{
    "code":200,"data":{
    "list":[{
    "password":"21232f297a57a5a743894a0e4a801fc3","role_id":1,"id":"0","account":"admin","username":"admin"},{
    "password":"21232f297a57a5a743894a0e4a801fc3","role_id":2,"id":"1","account":"test","username":"test"},{
    "password":"21232f297a57a5a743894a0e4a801fc3","role_id":1,"id":"10","account":"admin","username":"admin"},{
    "password":"21232f297a57a5a743894a0e4a801fc3","role_id":2,"id":"11","account":"test","username":"test"},{
    "password":"1213","role_id":2,"id":"12","account":"test","username":"test"},{
    "password":"21232f297a57a5a743894a0e4a801fc3","role_id":1,"id":"2","account":"admin","username":"admin"},{
    "password":"21232f297a57a5a743894a0e4a801fc3","role_id":2,"id":"3","account":"test","username":"test"},{
    "password":"21232f297a57a5a743894a0e4a801fc3","role_id":1,"id":"4","account":"admin","username":"admin"},{
    "password":"21232f297a57a5a743894a0e4a801fc3","role_id":2,"id":"5","account":"test","username":"test"},{
    "password":"21232f297a57a5a743894a0e4a801fc3","role_id":1,"id":"6","account":"admin","username":"admin"}],"pageNumber":1,"pageSize":10,"totalPage":2,"totalRow":13,"firstPage":true,"lastPage":false}}

Element UI表格样式引入

<template><center><el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"style="width: 80%;"><el-table-column label="序号"width="180"align="center"><template slot-scope="scope"><span v-text="getIndex(scope.$index)"></span></template></el-table-column><el-table-column label="账号"prop="account"></el-table-column><el-table-column label="姓名"prop="username"></el-table-column><el-table-column align="right"><template slot="header"slot-scope="scope"><el-input v-model="search"size="mini"placeholder="输入关键字搜索" /></template><template slot-scope="scope"><el-button size="mini"@click="handleEdit(scope.$index, scope.row)">Edit</el-button><el-button size="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">Delete</el-button></template></el-table-column></el-table>//分页方法<el-pagination @size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="pageNumber":page-sizes="[10, 20, 30, 40]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="this.totalRow"></el-pagination></center>
</template>

请求分页的数据

<script>
import {
     getUserList } from '@/api/user'
export default {
    data () {
    return {
    tableData: [],search: '',pageNumber: 1,//当前页pageSize: 10,//每页大小totalRow: 0,//总条数totalPage: 0,//总页数input: ''}},methods: {
    handleEdit (index, row) {
    console.log(index, row);},handleDelete (index, row) {
    console.log(index, row);},//分页点击方法handleSizeChange (val) {
    // console.log(`每页 ${val} 条`);this.pageSize = valvar params = {
    pageNumber: this.pageNumber,pageSize: this.pageSize}this.findAll(params)},handleCurrentChange (val) {
    // console.log(`当前页: ${val}`);this.pageNumber = valvar params = {
    pageNumber: this.pageNumber,pageSize: this.pageSize}this.findAll(params)},//分页方法findAll (params) {
    //获取数据接口（调用封装的接口）getUserList('/user/getUserList', params).then(res => {
    if (res.code === 200) {
    this.tableData = res.data.listthis.totalRow = res.data.totalRowconsole.log(this.tableData.length)} else if (res.code === 500) {
    this.$message(res.data)}})},//添加表格序号getIndex ($index) {
    return (this.pageNumber - 1) * this.pageSize + $index + 1}},//初始化的时候初始化表格大小created () {
    var params = {
    pageNumber: this.pageNumber,pageSize: this.pageSize}this.findAll(params)}}
</script>