zoukankan      html  css  js  c++  java
  • 【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')
  • 相关阅读:
    Cordova插件:InAppBrowser
    Redux入门学习
    【转】浅谈React、Flux 与 Redux
    .Net学习难点讨论系列17
    《集体智慧编程》读书笔记4
    《集体智慧编程》读书笔记3
    《集体智慧编程》读书笔记2
    《集体智慧编程》读书笔记1
    C#与C++的发展历程第四
    C#与C++的发展历程第三
  • 原文地址:https://www.cnblogs.com/wanghong1994/p/12558972.html
Copyright © 2011-2022 走看看