zoukankan      html  css  js  c++  java
  • vue + Element-ui 实现分页

    实现分页功能的关键技术点为页面显示的结果处理,而此处的关键技术点为JS的slice()方法。

    首先介绍slice()方法:

    slice() 方法可从已有的数组中返回选定的元素。

    slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。

    主要用法:

    array.slice(startend)

    参数描述
    start 可选。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
    end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

    Element-ui中的table组件所绑定的值为list,因此可以采用slice()方法实现,如:

    wx_attention_list.slice((currentPage-1)*pagesize,currentPage*pagesize)

    其中:

    currentPage表示当前页码,

    pagesize表示每页显示条目个数。

    附代码:

    table:

    <el-table
    :data="wx_attention_list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
    border
    stripe
    show-summary
    :summary-method="getTotal"
    style=" 75%;margin:20px auto 15px auto;">
    <el-table-column
    prop="number"
    label="序号"
    width="100"
    >
    </el-table-column>
    <el-table-column
    prop="wx_key_word"
    label="公众号"
    >
    </el-table-column>
    <el-table-column
    prop="num"
    label="数量"
    >
    </el-table-column>
    </el-table>

    pagination:

    <el-pagination
    :current-page.sync="currentPage"
    :page-size="pagesize"
    layout="total, prev, pager, next"
    :total="total">
    </el-pagination>

    附图:

     

  • 相关阅读:
    【go语言学习】标准库之sync
    【go语言学习】并发实现
    【go语言学习】并发概念
    【html学习】html基础
    【go语言学习】错误error和异常panic
    【go语言学习】type关键字
    【go语言学习】面向对象oop
    【go语言学习】接口interface
    【go语言学习】结构体struct
    【go语言学习】指针pointer
  • 原文地址:https://www.cnblogs.com/kadima-zy/p/page.html
Copyright © 2011-2022 走看看