一、新增控制元件

<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();
        }
}
 

三、實現效果