VUE使用elpagination添加分页功能

一、添加控件

<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[30, 25, 20, 15,10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total=suiteList.length>
    </el-pagination>

二、js部分

data() {
        return {
          suiteData: [],
          suiteList: [],
          pageSize:10,
          currentPage: 1
        };
      },
mounted() {
        this.getData();
      },
methods:{
        //获取数据
        getData() {
          this.$axios.get("/api/testCase").then((res)=> {
            this.caseList= res.data.result;
            this.getPageData()}
          );
        },
        // 根据分页设置的数据控制每页显示的数据条数及页码跳转页面刷新
        getPageData() {
          let start = (this.currentPage - 1) * this.pageSize;
          let end = start + this.pageSize;
          this.caseData = this.caseList.slice(start, end);
        },
        // 分页自带的函数，当pageSize变化时会触发此函数
        handleSizeChange(val) {
          this.pageSize = val;
          this.getPageData();
        },
        // 分页自带函数，当currentPage变化时会触发此函数
        handleCurrentChange(val) {
          this.currentPage = val;
          this.getPageData();
        }
}

三、实现效果

 

 
转自：https://www.jianshu.com/p/e57ab354e449