element -ui实现分页

最新推荐文章于 2024-08-06 11:06:11 发布

前端烂笔头

最新推荐文章于 2024-08-06 11:06:11 发布

阅读量973

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_45846359/article/details/108602837

版权

Vue 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

本文详细介绍了如何在项目中利用Element-UI组件库实现高效的分页功能，包括配置分页参数、事件监听及响应式设计，助力提升用户体验。

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

   <!-- 分页功能 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>

<script>
   	export default {
 data() {
   return {
     // 查询参数对象
     queryInfo: {
       //查询对象
       query: "",
       // 当前页码
       pagenum: 1,
       // 每页显示条数
       pagesize: 10,
     },
     // 商品列表数据
     goodsList: [],
     //数据总条数
     total: 0,
     
   };
 },
 methods: {
   // 根据分页获取对应的商品列表
   getGoodsList() {
     this.$axios
       .get("goods", {
         params: this.queryInfo,
       })
       .then((res) => {
         if (res.data.meta.status !== 200) {
           return this.$message.error(res.data.meta.msg);
         } else {
           // 列表数据
           this.goodsList = res.data.data.goods;
           //数据总条数
           this.total = res.data.data.total;
           console.log(res.data.data);
         }
       });
   },
   // 分页器 每页显示条数
   handleSizeChange(newsize) {
     this.queryInfo.pagesize = newsize;

     //重新刷新页面数据
     this.getGoodsList();
   },
   // 分页器 当前页码
   handleCurrentChange(newpage) {
     this.queryInfo.pagenum = newpage;

     //重新刷新页面数据
     this.getGoodsList();
   },
 },
 created() {
   this.getGoodsList();
 },
};
</script>