vue使用element-ui实现分页功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue使用element-ui实现分页功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

element-ui官网上有分页实现的功能，简单方便又好用，也有很多分页的样式，你可以根据需要去选择自己想要的样式。这里讲的是完整功能样式的一个分页实现。过程如下：

一、写一个table，并添加分页

<template>
  <div class="table-box">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="phone" label="手机号">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
    <div class="paginationBlock">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10, 20, 30, 40, 50,100]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

二、定义分页数据

 data() {
    return {
      tableData:[],
      total: 0,
      currentPage: 1,
      pageSize: 5,
    }
  },

三、引入接口，定义获取数据的方法和分页触发的方法

<script>
//接口名称自定义
import { getTableListApi } from '@/api/demoApi/tableDemoApi'
export default {
  name: 'pagination-demo',
  data() {
    return {
      tableData:[],
      total: 0,
      currentPage: 1,
      pageSize: 5,
    }
  },
  created() {
    //获取列表数据
    this.getTableList()
  },
  methods: {
    getTableList() {
      let data = {
        pageIndex: this.currentPage,
        pageSize: this.pageSize,
      }
      getTableListApi(data).then((res) => {
        this.tableData = res.result
        this.total = res.total
        this.currentPage = res.pageIndex
        this.pageSize = res.pageSize
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getTableList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getTableList()
    },
  },
}
</script>