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')
  • 相关阅读:
    分布式系统学习一-概念篇
    JAVA多线程学习九-原子性操作类的应用
    JAVA多线程学习八-多个线程之间共享数据的方式
    JAVA多线程学习七-线程池
    vue 工作随笔
    智能云课堂整理
    mysql
    模板引挚 jade ejs
    node实战小例子
    昭山欢node资料学习笔记
  • 原文地址:https://www.cnblogs.com/wanghong1994/p/12558972.html
Copyright © 2011-2022 走看看