vue 表格分页

最新推荐文章于 2023-11-17 11:41:38 发布

幼稚猿

最新推荐文章于 2023-11-17 11:41:38 发布

阅读量120

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/mysundays/article/details/119720965

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这篇博客展示了如何在Vue.js应用中结合Element UI库创建一个带有分页功能的表格。通过实例代码，作者详细解释了如何初始化数据，处理分页事件以及动态加载页面数据。内容涵盖了`axios`进行API请求，`el-table`和`el-pagination`组件的使用方法。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <!-- 表格数据 -->
    <div class="table-content">
      <el-table :data="pageList" stripe style="width: 100%;">
        <el-table-column prop="1" label="1"></el-table-column>
        <el-table-column prop="2" label="2"></el-table-column>
        <el-table-column prop="3" label="3"></el-table-column>
        <el-table-column prop="4" label="4"></el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="rawList.length"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawList: [],
      currentPage1: 1,
      pageSize: 10,
      pageList: []
    };
  },

  mounted() {
    this.axios.get("/api/xxx").then(response => {
      this.rawList = response.data;
      this.currentChangePage(this.rawList, 1);
    });
  },

  methods: {
    handleSizeChange: function(pageSize) {
      this.pageSize = pageSize;
      this.handleCurrentChange(this.currentPage1);
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage1 = currentPage;
      this.currentChangePage(this.rawList, currentPage);
    },
    currentChangePage(list, currentPage) {
      let from = (currentPage - 1) * this.pageSize;
      let to = currentPage * this.pageSize;
      this.pageList = [];
      for (; from < to; from++) {
        if (list[from]) {
          this.pageList.push(list[from]);
        }
      }
    }
  }
};
</script>