1. 程式人生 > >vue 處理後臺請求json資料,並渲染

vue 處理後臺請求json資料,並渲染

後臺傳給前臺的json資料格式,這裡原本只是傳list資料給後臺,因為需要分頁,所以用pageInfo包了一下,成了json格式:

{
  "data": {
    "endRow": 1,
    "firstPage": 1,
    "hasNextPage": false,
    "hasPreviousPage": false,
    "isFirstPage": true,
    "isLastPage": true,
    "lastPage": 1,
    "list": [
      {
        "administration": "xxx",
        "catgory_detail": "xxxx",
        "code": "xxx",
        "employeeNumber": "xxxx",
        "expensesCatgory": "xxxxx",
        "extensions": "1",
        "grantDate": "",
        "grantMoney": "0.00",
        "number": "100.00",
        "offset": "0.00",
        "pm": "xxx",
        "project_code": "xxx",
        "project_name": "xxxxx",
        "reason": "xxxxxxxxx",
        "status": 0,
        "submit_date": "",
        "userName": "xxxxx"
      },
      {
        "administration": "xxx",
        "catgory_detail": "xxxx",
        "code": "xxx",
        "employeeNumber": "xxxx",
        "expensesCatgory": "xxxxx",
        "extensions": "1",
        "grantDate": "",
        "grantMoney": "0.00",
        "number": "100.00",
        "offset": "0.00",
        "pm": "xxx",
        "project_code": "xxx",
        "project_name": "xxxxx",
        "reason": "xxxxxxxxx",
        "status": 0,
        "submit_date": "",
        "userName": "xxxxx"
      }
    ],
    "navigatePages": 8,
    "navigatepageNums": [
      1
    ],
    "nextPage": 0,
    "pageNum": 1,
    "pageSize": 2,
    "pages": 1,
    "prePage": 0,
    "size": 2,
    "startRow": 0,
    "total": 2
  },
  "massage": "成功",
  "statusCode": 0
}

vue:

在export default {
  data(){
    return {
      tableData: [],  #宣告下tableDate;
    }
  }
}

頁面上能顯示出資料了,說明渲染對了。