ElementUI的分页实现

1.分页组件

    <!-- 分页组件 -->
    <div class="pageturn">
      <el-pagination
          background
          @size-change="pageSizeChange"
          @current-change="pageCurrentChange"
          :current-page="pageform.pageNum"
          pager-count="5"
          :page-sizes="pageform.pageSizes"
          :page-size="pageform.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageform.dataCount">
      </el-pagination>
    </div>

2.js代码

<script>
import axios from "axios";

export default {
      
      

  created() {
      
      
    this.getData();
  },

  data() {
      
      
    return {
      
      
      tableData: [],
      pageform: {
      
      
        dataCount: 0, // 总条目数
        pages: 5,  // 总页数
        pageNum: 1, // 当前的页码
        pageSizes: [5,10,15,20,30,40,50], // select选项设置：条/页
        pageSize: 5, // 每页显示条目个数
        navigateFirstPage: 1, // 上一页
        navigateLastPage: 3, // 下一页
        lastPage: false, // 是最后一页？
        firstPage: false, // 是第一页？
        hasNextPage: true, // 有下一页？
        hasPreviousPage: true // 有上一页？
      },
      productMsg:""
    }
  }, methods: {
      
      
    //根据页码获取数据
    getData() {
      
      
      let that =this
      axios
          .post('url', {
      
      
            params:
                {
      
      
                  pageNum: that.pageform.pageNum,
                  pageSize: that.pageform.pageSize
                }
          })
          .then(function (response) {
      
      
            console.log(response.data.products)
            that.tableData= response.data.products
            that.pageform.dataCount=response.data.dataCount
              }
          ).catch(function (error) {
      
      
        this.$message.error('服务异常' + error);
      });
    },

    //分页监听事件
    // pageSize (每页显示条目个数)改变时会触发
    pageSizeChange(val) {
      
      
      let that =this
      that.pageform.pageSize = val;
      console.log("设置:"+that.pageform.pageSize+"条/页");
      this.getData();
    },
    // pageNum (当前页数)改变时会触发
    pageCurrentChange(val) {
      
      
      this.pageform.pageNum = val;
      console.log("当前页数:"+this.pageform.pageNum);
      this.getData();
    },
  } ,mounted() {
      
      
    this.getData()
  }
}
</script>

3.注意事项

最后别忘了在mounted()中调用一下获取数据的方法this.getData()，mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。