Vue——el-pagination分页显示

使用Element ui 中el-pagination进行分页显示

1、el-table进行数据筛选：:data="tableData3.slice((currentPage-1)*pagesize,currentPage*pagesize)"

过滤当前页面需要显示的数据

2、增加div 显示分页功能，修改total为tableData3数据的数量，tableData3我这边定义的[] 接口提供的数据

   <div
      id="page"
      style="margin-top:10px;text-align: center;width: 1280px;">
      <!-- <span class="demonstration">显示总数</span> -->
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40,100]"
        :page-size="pagesize"
        :total="tableData3.length"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>

3、script:初始化页面数据显示哪一页 每页多少条

<script>
export default {
  data() {
    return {
      tableData3: [],
      currentPage: 1, //  el-pagination 初始页
      pagesize: 5 //  el-pagination 每页的数据
    }
  },
  methods: {
    // size-change	pageSize 改变时会触发	每页条数size
    // current-change	currentPage 改变时会触发	当前页currentPage
    handleSizeChange: function(size) {
      this.pagesize = size
      console.log(this.pagesize) // 每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage) // 点击第几页
    }
  }
}
</script>

参考：

https://element.eleme.cn/2.0/#/zh-CN/component/pagination