Vue element 分页

1.添加element分页：https://element.eleme.cn/#/zh-CN/component/pagination

<el-pagination
   @size-change="handleSizeChange"
   @current-change="handleCurrentChange"
   :current-page="page_index"
   :page-sizes="page_sizes"
   :page-size="page_size"
   layout="total, sizes, prev, pager, next, jumper"
   :total="totals">
</el-pagination>

1. size-change：pageSize 改变时会触发。

2. current-change：currentPage 改变时会触发。

3. current-page：当前页数。

4. page-sizes：每页显示个数选择器的选项设置。[10, 20, 30, 40, 50, 100]

5. page-size：每页显示条目个数。

6. layout：组件布局，子组件名用逗号分隔。

7. total：总条目数。

2.JS代码：

<script>
export default {
  name: "Content",
  data() {
    return {
      posts: [],
      loading: false,

      totals: 0,//总条目数
      page_index: 1, //当前页
      page_size: 5, //每页显示条数
      page_sizes: [5, 10, 20, 40],//每页显示个数选择器的选项设置
      allData: [],//所有数据
    };
  },
  created() {
    this.loading = true;
    this.handleUserList();
  },
  methods: {
    handleUserList() {
      this.$http({
        url: "https://cnodejs.org/api/v1/topics",
        method: "get",
        params: {
          page: 1,
          limit: 30,
        },
      })
        .then((res) => {
          if (res.data.success === true) {
            this.posts = res.data.data;
            this.loading = false;

            this.allData = res.data.data;
            this.setPaginations();
          } else {
            console.log("get request failed!!");
          }
        })
        .catch((err) => {
          console.log("err:", err);
        });
    },
    //填充数据
    setPaginations() {
      this.totals = this.allData.length;
      this.page_index = 1;
      this.page_size = 20;

      this.posts = this.allData.filter((item, index) => {
        return index < this.page_size;
      });
    },
    //每页显示条数
    handleSizeChange(pageSize) {
      this.page_index = 1;
      this.page_size = pageSize;
      this.posts = this.allData.filter((item, index) => {
        return index < pageSize;
      });
    },
    //当前页数
    handleCurrentChange(page) {
      let index = this.page_size * (page - 1);
      let allData = this.page_size * page;
      let dataList = [];
      for (let i = index; i < allData; i++) {
        if (this.allData[i]) {
          dataList.push(this.allData[i]);
        }
        this.posts = dataList;
      }
    },
  },
};
</script>

3.完整代码：

<template>
  <div>
    <el-container>
      <el-main>
        <div class="PostList">
          <div
            class="loading"
            v-if="loading"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
          >
          </div>
          <div class="posts" v-else>
            <ul>
              <li v-for="(post, index) in posts" :key="index">
                <router-link
                  :to="{
                    name: 'user_info',
                    params: { name: post.author.loginname },
                  }"
                  :title="post.author_id"
                >
                  <img
                    :src="post.author.avatar_url"
                    :title="post.author.loginname"
                  />
                </router-link>
                <span> {{ post.reply_count }}/{{ post.visit_count }} </span>
                <router-link
                  target="_blank"
                  :to="{
                    name: 'post_content',
                    params: { id: post.id, name: post.author.loginname },
                  }"
                  :title="post.title"
                >
                  {{ post.title }}
                </router-link>
                <span class="last_reply">
                  {{ post.last_reply_at.split("T")[0] | formatDate }}
                </span>
              </li>
            </ul>
            <div style="text-align: center">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page_index"
                :page-sizes="page_sizes"
                :page-size="page_size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totals"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Content",
  data() {
    return {
      posts: [],
      loading: false,

      totals: 0, //总条目数
      page_index: 1, //当前页
      page_size: 5, //每页显示条数
      page_sizes: [5, 10, 20, 40], //每页显示个数选择器的选项设置
      allData: [], //所有数据
    };
  },
  created() {
    this.loading = true;
    this.handleUserList();
  },
  methods: {
    handleUserList() {
      this.$http({
        url: "https://cnodejs.org/api/v1/topics",
        method: "get",
        params: {
          page: 1,
          limit: 30,
        },
      })
        .then((res) => {
          if (res.data.success === true) {
            this.posts = res.data.data;
            this.loading = false;

            this.allData = res.data.data;
            this.setPaginations();
          } else {
            console.log("get request failed!!");
          }
        })
        .catch((err) => {
          console.log("err:", err);
        });
    },
    //填充数据
    setPaginations() {
      this.totals = this.allData.length;
      this.page_index = 1;
      this.page_size = 20;

      this.posts = this.allData.filter((item, index) => {
        return index < this.page_size;
      });
    },
    //每页显示条数
    handleSizeChange(pageSize) {
      this.page_index = 1;
      this.page_size = pageSize;
      this.posts = this.allData.filter((item, index) => {
        return index < pageSize;
      });
    },
    //当前页数
    handleCurrentChange(page) {
      let index = this.page_size * (page - 1);
      let allData = this.page_size * page;
      let dataList = [];
      for (let i = index; i < allData; i++) {
        if (this.allData[i]) {
          dataList.push(this.allData[i]);
        }
        this.posts = dataList;
      }
    },
  },
};
</script>

<style >
body {
  margin: 0;
  padding: 0;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

::-webkit-scrollbar {
  width: 6px;
  background-color: #ffffff;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: #bfbfbf;
  background-color: #ffffff;
}

::-webkit-scrollbar-thumb {
  border-radius: 30px;
  background-color: #615b5b49;
}

.PostList .posts {
  background-color: white;
  padding: 0.5rem;
  margin: 0.5rem 3rem;
}
.PostList .posts li {
  list-style: none;
  margin-bottom: 14px;
  border-bottom: 1px solid #e7e7e7;
  line-height: 30px;
}
.PostList .posts ul li img {
  width: 1.5rem;
  height: 1.5rem;
}
.PostList .posts li span {
  display: inline-block;
  text-align: center;
  width: 70px;
  font-size: 12px;
  margin: 0 10px;
}
.PostList .posts a {
  text-decoration: none;
  color: inherit;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}
.PostList .posts a:visited {
  color: #858585;
}
.PostList .posts .last_reply {
  float: right;
  font-size: 0.7rem;
  margin-top: 0.3rem;
}
</style>

接口数据来自cnode社区demo：https://cnodejs.org/