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>

  • 相关阅读:
    关于如何正确地在android项目中添加第三方jar包
    如何在asp.net页面使用css和js
    Prolog 外部不能有 DOCTYPE 声明。处理资源 'http://192.168.115.152:8082/api/EmpApi.aspx' 时出错。第 3 行,位置: 11
    怎样在iis中发布asp.net网站
    WInform 创建一个简单的WPF应用
    细说WPF数据绑定
    WPF控件模板
    DC画线
    第一部分 Mysql的基础
    链表○⇢习题集
  • 原文地址:https://www.cnblogs.com/Trista-l/p/7929400.html
Copyright © 2011-2022 走看看