elementui中的el-pagination分页器使用

 一、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>