[Vue] elementui paging use

vue文件:
        <!--    分页  -->
    <div class="block" style="position: fixed;bottom: 5px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync=currentPage
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total=total>
      </ EL-the pagination> 
    </ div> 

VUE defined variables: 
Export default { 
    Data () { 
      return { The currentPage:

         . 1, 
        Page:. 1, 
        size: 10, 
        Total:. 1 , 
        watchGoodsArr: [],
      
 
        }], 
    
      } 
    } , 

import addedSuperviseGoods} from { '@ / API / SearchWords' packaging method of introducing ajax request 

to open Home rendering methods: 
    Mounted () { addedSuperviseGoods ( 
      the this .page, the this .size) .then (Response => {# ajax request packaging method 
        console .log (response.data) 
        IF (response.code ===200 is ) {
           the this .total = response.count
           return  the this .watchGoodsArr = response.data 

        } the else  IF (response.code === 10001 ) {
           the this . Router.push $ ( ' / Login ' ) 
        } 
      }) 
    } 


Element tab predetermined usage: 
 // tab 
      handleSizeChange (Val) {          // page few 


      }, handleCurrentChange (Val) {      
       // this page 
          this.page = Val 
          this.size = 10; addedSuperviseGoods
          (this.page, this.size) .then (response => {# click request to return data to render pages 

            this.total = response.count 
            this.watchGoodsArr = []; 
            return this.watchGoodsArr = response.data 
          }) 
      },
ajax function package file request Export

 const = addedSuperviseGoods (Page, size) => ajax (BASE_URL + '/ keyword / Monitored / showgoods', {Page, size}, 'the GET')

 

Guess you like

Origin www.cnblogs.com/wanghong1994/p/12558972.html