【易购管理系统】商品列表分页显示

在components文件夹中新建MyPagination.vue，在Element中找到与分页相关的组件

<el-pagination
  background
  layout="prev, pager, next"
  :total="1000" >
</el-pagination>

然后添加显示总条数和跳转多少页

<el-pagination
  background
  layout="total, prev, pager, next, jumper"
  :total="1000" :page-size="100">
</el-pagination>

也就是说我们要接收这个total和pageSize

  props: {
    total: {
      type: Number,
      default: 100,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    }

<el-pagination
    background
    layout="total,prev, pager, next,jumper"
    :total="total"
    :page-size="pageSize"
  >
  </el-pagination>

在商品界面导入这个分页组件

import MyPagination from "../../components/MyPagination.vue";
export default {
  components: {
    MyPagination,
  },
 data() {
    return {
      input: "",
      tableData: [],
      total: 10,
      pageSize: 1,
    };
  },
   created() {
    this.$api
      .getGoodsList({
        page: 1,
      })
      .then((res) => {
        console.log(res.data);
        // 状态码为200，代表成功获取数据
        if (res.data.status === 200) {
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.pageSize = res.data.pageSize;
        }
      });
  },
 }

引用

<MyPagination :total="total" :pageSize="pageSize"></MyPagination>

最终的效果为：

接下来做一个点击效果：（点击第几页就跳到第几页）

在MyPagination.vue中增减点击效果

<template>
  <el-pagination
    background
    layout="total,prev, pager, next,jumper"
    :total="total"
    :page-size="pageSize"
    @current-change="changePage"
  >
  </el-pagination>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 100,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
  },
  methods: {
    changePage(page) {
      this.$emit("changePage", page);
    },
  },
};
</script>

<style>
</style>

添加一个点击事件，将这个事件给到Goods中

 <MyPagination
      :total="total"
      :pageSize="pageSize"
      @changePage="changePage"
    ></MyPagination>

初始化一些数据，比如

 data() {
    return {
      input: "",
      tableData: [],
      total: 10,
      pageSize: 1,
    };
  },

 //  商品列表的获取
    http(page) {
      this.$api
        .getGoodsList({
          page,
        })
        .then((res) => {
          console.log(res.data);
          // 状态码为200，代表成功获取数据
          if (res.data.status === 200) {
            this.tableData = res.data.data; //数据列表
            this.total = res.data.total;
            this.pageSize = res.data.pageSize;
          }
        });
    },

 // 分页页码
    changePage(num) {
      this.http(num);
    },

created() {
    this.http(1);
  },

最终的结果为