【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 if (response.code === 10001) {
          this.$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')