zoukankan      html  css  js  c++  java
  • vue Element-UI 分页使用(1)

      最近在使用Element-UI这套框架配合Vue来写前端页面。在用Element-UI来制作表格的时候,遇到了一些小问题,记录方便学习。

    其中两个事件是关于切换当前页和切换显示的列表条数的。另外的属性也可以知道它的意思。它们都是动态绑定的。其中几个属性的值被存到了data中,

    两个事件的处理简单的进行赋值。

    这个时候我觉得好像就可以了。点击下一页和切换显示的列表条数。..怎么感觉表格就像大山一样坚定!纹丝不动。于是我直接在页面中想要显示一下当我切换的时候表格的数据

    其中tableData是我mock的假数据,存在data中。测试结果发现当我切换的时候表格绑定的这个tableData根本就没有改变。所以理所当然的呈现在表格当中。

    那么,意思就是说切换和表格数据这两者根本就没有联动起来!找到问题之后就开始去思考如何解决问题。这两者是存在一定的计算关系的。因为表格的数据的长度(条数)

    就是根据我切换的数值相应的变化,那么就应该有这么一个计算式:tableData=((当前页的页数*页的大小)-(当前页的页数-1)*页的大小)

    对应到程序中来就是:tableData=tableData.slice((this.pageNum-1)*this.pageSize,this.pageNum*this.pageSize);

    这个值可以放到计算属性computed当中,当然也可以直接赋值给表格数据,即: <el-table :data="tableData.slice(...)"></el-table>

  • 相关阅读:
    MySQL 删除有外键约束的表数据
    Python 类装饰器解析
    保持SSH连接的linux服务器不断线
    数字货币交易所常用概念
    Python f-string
    Linux sed命令
    CAS机制详解
    MySQL缓存机制
    PHP网络请求优化
    Java三大特性---继承
  • 原文地址:https://www.cnblogs.com/Trista-l/p/7929400.html
Copyright © 2011-2022 走看看