elementUI实现前端分页

最新推荐文章于 2024-07-24 23:00:08 发布

一加一不是二

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量434

点赞数

文章标签：前端 vue.js elementui

本文链接：https://blog.csdn.net/GardJasmin/article/details/127249764

版权

效果图

html部分

<div>
    <el-table :data="tableList" border>
      <el-table-column label="序列" prop="index"></el-table-column>
      <el-table-column label="内容" prop="data">
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchdata.pageindex" :page-sizes="[2,5, 10]"
      :page-size="searchdata.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>

js部分

data() {
    return {
      tabledata: [
        { index: 1, data: '第一条' }, { index: 2, data: '第二条' }, { index: 3, data: '第三条' }, { index: 4, data: '第四条' },
        { index: 5, data: '第五条' }, { index: 6, data: '第六条' }, { index: 7, data: '第七条' }, { index: 8, data: '第八条' },
        { index: 9, data: '第九条' }, { index: 10, data: '第十条' }, { index: 11, data: '第11条' }, { index: 12, data: '第12条' }
      ],//源数据
      tableList: [],//实际表格数据
      searchdata: {
        pagesize: 10,
        pageindex: 1
      },//页码，页长
      total: 0//总数据长度
    }
  },
  created() {
    this.pageList()
  },
  methods: {
    handleSizeChange(val) {
      this.searchdata.pagesize = val;
      this.pageList();
    },
    handleCurrentChange(val) {
      this.searchdata.pageindex = val;
      this.pageList();
    },
    //分页
    pageList() {
      this.tableList = this.tabledata.filter(
        (item, index) =>
          index < this.searchdata.pageindex * this.searchdata.pagesize &&
          index >= this.searchdata.pagesize * (this.searchdata.pageindex - 1)
      );
      this.total = this.tabledata.length;
    },
  }