【vue】 elementui 分页使用

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-pagination>
    </div>

vue 定义的变量:
export default {
    data() {
      return {

        currentPage: 1,page: 1,size: 10,total:1,watchGoodsArr: [],
      

        }],}
    },import {addedSuperviseGoods} from '@/api/searchWords' 导入 ajax请求封装方法

打开首页渲染方法：
    mounted() {
      addedSuperviseGoods(this.page,this.size).then(response => {    # ajax请求封装方法
        console.log(response.data)
        if (response.code === 200) {
          this.total = response.count
          return this.watchGoodsArr = response.data

        } else 10001this.$router.push('/login')
        }
      })
    }


element分页规定用法：
 // 分页
      handleSizeChange(val) {         每页几条


      },handleCurrentChange(val) {      //当前页
          this.page =  val
          this.size = 10;
          addedSuperviseGoods(this.page,this.size).then(response => {  # 点击请求页数返回数据渲染

            this.total = response.count
            this.watchGoodsArr = [];
            return this.watchGoodsArr = response.data
          })
      },

ajax文件请求封装函数

export const addedSuperviseGoods = (page,size) => ajax(BASE_URL+'/keyword/monitored/showgoods',{page,size},'GET')