【vue分页】前端列表假分页

备注：后端接口返回全部数据，前端页面进行分页

一、后端接口格式

http://127.0.0.1:9528/dev-api/alice/api/plan/api/case?apiId=1001
get
返回结果：
{
    "status":1,
    "message":"OK",
    "data":{
        "apiInfo":{
            "type":"get",
            "path":"/api/login",
            "caseInfo":[
                {
                    "caseId":117,
                    "createtime":974579228328,
                    "updatetime":1457649153016,
                    "caseDescribe":"描述9gzW3n",
                    "domainAddress":"域名地址ROwy",
                    "apiPath":"/api/login",
                    "header":"Content-Type:application/json",
                    "parmsInfo":{
                        "currentCity":"嘉兴",
                        "weather_data":[
                            {
                                "date":"今天（周三）",
                                "weather":"多云",
                                "wind":"微风",
                                "temperature":"23℃"
                            },
                            {
                                "date":"明天（周四）",
                                "weather":"雷阵雨转中雨",
                                "wind":"微风",
                                "temperature":"29～22℃"
                            }
                        ]
                    },
                    "resultInfo":{
                        "userId":"29ac7325-30da-4e6a-8a00-9699820fc04a",
                        "realName":"小雪18",
                        "gradeCode":"166",
                        "provinceCode":"110000",
                        "cityCode":{
                            "test1":"test1",
                            "test2":"test2"
                        },
                        "schoolId":21,
                        "schoolLevel":1,
                        "schoolName":"北京第二实验小学朝阳学校"
                    },
                    "expectedResults":"status=1,mag='OK' ",
                    "ignore":"userId",
                    "implementResult":"false"
                },
                {
                    "caseId":118,
                    "createtime":1285642258641,
                    "updatetime":1130680637539,
                    "caseDescribe":"描述GI6yhYx",
                    "domainAddress":"域名地址t0j",
                    "apiPath":"/api/login",
                    "header":"Content-Type:application/json",
                    "parmsInfo":{
                        "currentCity":"嘉兴",
                        "weather_data":[
                            {
                                "date":"今天（周三）",
                                "weather":"多云",
                                "wind":"微风",
                                "temperature":"23℃"
                            },
                            {
                                "date":"明天（周四）",
                                "weather":"雷阵雨转中雨",
                                "wind":"微风",
                                "temperature":"29～22℃"
                            }
                        ]
                    },
                    "resultInfo":{
                        "userId":"29ac7325-30da-4e6a-8a00-9699820fc04a",
                        "realName":"小雪18",
                        "gradeCode":"166",
                        "provinceCode":"110000",
                        "cityCode":{
                            "test1":"test1",
                            "test2":"test2"
                        },
                        "schoolId":21,
                        "schoolLevel":1,
                        "schoolName":"北京第二实验小学朝阳学校"
                    },
                    "expectedResults":"status=1,mag='OK' ",
                    "ignore":"userId",
                    "implementResult":"false"
                }
            ]
        }
    }
}

二、前端展示效果

 

 

 

 

三、前端代码

3.1、html代码

<!-- 用例列表 -->
<el-table v-loading="listLoading" :data="caseInfoList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
  element-loading-text="Loading" border stripe fit highlight-current-row>
  <el-table-column align="center" label="序号" width="95">
    <template slot-scope="scope">
      {{ scope.$index }}
    </template>
  </el-table-column>
  <el-table-column label="用例编号">
    <template slot-scope="scope">
      {{ scope.row.caseId }}
    </template>
  </el-table-column>
  <el-table-column label="用例描述">
    <template slot-scope="scope">
      {{ scope.row.caseDescribe }}
    </template>
  </el-table-column>
  <el-table-column label="用例详情">
    <template slot-scope="scope">
      <el-button type="text" @click="showDetail(scope.row)">详情</el-button>
    </template>
  </el-table-column>
  <el-table-column label="执行结果" align="center">
    <template slot-scope="scope">
      <span v-if="scope.row.implementResult == 'false'" style="color: red;">{{ scope.row.implementResult }}</span>
      <span v-else style="color: #0076ff;">{{ scope.row.implementResult }}</span>
    </template>
  </el-table-column>
  <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
    <el-button size="mini" type="primary">
      编辑
    </el-button>
    <el-button size="mini" type="danger">
      删除
    </el-button>
    <el-button size="mini" type="success">
      运行
    </el-button>
  </el-table-column>
</el-table>

3.2、分页h5代码

<!-- 分页 -->
<div class="pagination">
  <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
    :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="caseInfoList.length">
  </el-pagination>
</div>

 

3.3、js代码

data() {
      return {
        currentPage: 1, //初始页
        pagesize: 10, //    每页的数据
        caseInfoList: [],
        listLoading: true,
        listQuery: {
          apiId: '1001',
        },

    }
    methods: {
      // 切换每页条数时
      handleSizeChange: function(size) {
        this.pagesize = size;
        console.log(this.pagesize) //每页下拉显示数据
      },
      // 切换当前页码时
      handleCurrentChange: function(currentPage) {
        this.currentPage = currentPage;
        console.log(this.currentPage) //点击第几页
      },
      // 获取case列表
      getCaseInfo() {
        this.listLoading = true
        getPlanApiCase(this.listQuery).then(response => {
          this.caseInfoList = response.data.apiInfo.caseInfo
          this.apiPath = response.data.apiInfo.path
          this.apiType = response.data.apiInfo.type
          console.log(this.caseInfoList)
          this.listLoading = false
        })
      },

    }
}