elementui中的el-pagination分页器使用

最新推荐文章于 2025-03-19 16:58:10 发布

by__csdn

最新推荐文章于 2025-03-19 16:58:10 发布

阅读量1.1k

点赞数 1

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/by__csdn/article/details/119946883

版权

HTML el-pagination 动态数据接口调用前端开发

关键词由优快云通过智能技术生成

vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何在HTML中使用Element UI的分页组件，并通过JavaScript实现动态加载数据，包括处理页码改变和每页条数调整事件。通过实例演示了接口调用和状态管理在前端开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、html部分

total是总页数；xinwzix.pageSize是一页显示几条；xinwzix.pageNum是显示第几页；

<el-pagination :total="total" :current-page="xinwzix.pageNum" :page-size="xinwzix.pageSize"
    :page-sizes="[5]" :pager-count="5" @current-change="handleCurrentChange"
     @size-change="handleSizeChange" background layout="total, sizes, prev, pager, next">
</el-pagination>

二、script标签内容

<script>
//引入接口
import { queryAllArticle } from "../api/home";
export default {
  data() {
    return {
      //定义获取接口名
      user: "",
      xinwzix: {
        // 一页几条
        pageSize: 5,
        // 第几页
        pageNum: 1,
      },
       //总条目数
      total: 0,
    };
  }，
  created() {
    //页面开始加载的时候调用这个方法
    this.loadqueryAllArticle();
  },
  methods: {
    // 接口方法
    loadqueryAllArticle() {
      queryAllArticle( this.xinwzix.pageSize, this.xinwzix.pageNum).then((res) => {
        this.user = res.msg.rows;
        //总条数
        this.total = res.msg.total;
      });
    },
    handleCurrentChange(val) {
      //传入当前选择的页数
      this.xinwzix.pageNum= val;
      this.loadqueryAllArticle();
    },
    handleSizeChange(val) {
      //传入当前选择的一页几条
      this.xinwzix.pageSize = val;
      this.loadqueryAllArticle();
    }
  },
}
</script>