vue + element 구현 목록 데이터 페이지 (배경 데이터 연결)

1. 표 아래 에 쓰기

data () {
      return {
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
      }
    },

3. methods 중:

XXXXXXData () {
        this.$http({
          url: this.$http.adornUrl('/      '),
          method: 'get',
          params: this.$http.adornParams({
            'name': this.listQuery.name,       //          
            'page': this.pageIndex,          //   
            'limit': this.pageSize              //      
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.tableData = data.page.list     //         tableData（      ）
            this.totalPage = data.page.totalCount    //     
          } else {
            this.tableData = []
            this.totalPage = 0
          }
          console.log(JSON.stringify(data))
        }).catch(function (error) {     //       ，            
          console.log(error)
        })
      },

4. 다음 두 가지 방법 을 적어 야 한다. 그렇지 않 으 면 페이지 를 바 꾸 는 데 이 터 를 클릭 하면 페이지 를 바 꾸 지 않 는 다.내 가 호출 한 XXXXX Data () 를 주의 하 세 요. 만약 에 배경 데 이 터 를 호출 했 으 면 세 번 째 단 계 를 수정 하고 네 번 째 단계 에 있 는 XXXXX Data () 를 배경 으로 연결 하 는 방법 으로 바 꾸 면 됩 니 다.

     //    
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.XXXXXXData()     
      },
      //    
      currentChangeHandle (val) {
        this.pageIndex = val
        this.XXXXXXXData()
      },

5. 모든 사람 이 백 스테이지 에서 돌아 오 는 제 이 슨 의 형식 이 다 를 수 있 습 니 다. 제 것 은 이런 형식 입 니 다. 제 백 스테이지 에서 들 려 오 는 형식 에 따라 적 절 히 수정 합 니 다.

{
"msg":"success",
"code":0,
"page":    	
	{
	"totalCount":    ,
	"pageSize":      ,
	"totalPage":   ,
	"currPage":      ,
	"list":[{
	         ...
	     }]
	 }
}