iview 带有Page分页组件集合的复杂表格

前言：

这里的表格数据为通过axios获取到的后端的数据，如何将获取到的数据显示在前端，并且配合使用iview 的Page组件实现带有分页组件集合的复杂表格。效果如下：

1、首先既然是使用iview的组件那安装就不比多说了，iview官网（https://www.iviewui.com/docs/guide/install）

2、上代码

1）在你需要使用分页的页面上一引入iview Table组件和Page组件

<Table border :loading="tableloading" :columns="tableColumns"
:data="tableData" ref="table"></Table><div class="page"><Page :total="total" @on-change="changePage" :current="pageNum" :page-size="pageSize" @on-page-size-change='handlePageSize' show-total  show-elevator show-sizer :page-size-opts='[10,20,50,100]'/>
</div>

Table组件

1、border 给表格设置边框（看自己喜欢添加）

2、:loading="tableloading" 设置表格是否加载中（看自己喜欢添加）

3、:columns="tableColumns" :data="tableData" 表格列的配置描述，表格数据

Page组件

1、:total="total" 动态显示total参数显示总共多少条数据（每次后端数据可能不一样，所以动态获取一下就行，不用写死）

2、@on-change="changePage" 页码改变的回调，返回改变后的页码（必须添加！！）

3、:current="pageNum" 动态设置当前页码与@on-change事件配合使用，实现切换下一页显示数据

4、:page-size="pageSize" 动态设置每页条数

5、@on-page-size-change='handlePageSize' 切换每页条数时的回调，返回切换后的每页条数用于设置每页显示的条数，与:page-size="pageSize" 配合使用

6、show-total 显示总条数

7、show-elevator显示电梯，可以快速切换到某一页

8、show-sizer显示分页，用来改变每页条数

9、:page-size-opts='[10,20,50,100]'每页条数切换的配置

2）data数据初始化：

data () {return {tableColumns: [],tableData: [],tableData2:[],total:0,pageNum: 1,pageSize: 10,tableloading:false,}
}

3）methods中定义的方法

注：这里的axios为我封装过后的，不能直接复制使用

this.tableloading = true在没次点击下一页的时候出现表格加载中的标志（可去掉）

this.tableData2 = response.data.data.list;将后端获取到的所有数据先赋值到tableData2进行数据操作一下再赋值到tableData里面显示表格数据

this.tableData = this.tableData2.slice(0,this.pageSize); 获取tableData2所有数据中的前10条数据显示，因为这里this.pageSize我初始化就是10条，所以在不点击显示下一页的情况下表格数据初始化就是前10条数据

this.total = response.data.data.count;因为我与后端人员协调好会返回一个count数据总数所以我直接赋值在total里面，如果你们没有count这个参数写成this.total = this.tableData2.length也是一样的

// 获取表格数据
getTable(){this.tableloading = truepost('你们自己的接口',{token:this.token,}).then(response =>{this.tableloading = falseif (response.data) {this.tableData2 = response.data.data.list;this.tableData = this.tableData2.slice(0,this.pageSize);this.total = response.data.data.count;}})
},

changePage(index){this.tableData = this.tableData2.slice((index - 1)*this.pageSize,index*this.pageSize);this.pageNum = index;this.getTable();//这个为axios获取后端数据的方法，换成你们自己的，
//如果表格数据为静态数据，那么去掉即可
},
handlePageSize(index) {this.pageSize = index;this.getTable();
},

显示表格数据初始化的10条数据就写好了，现在要写当点击下一页的时候表格显示的数据

handlePageSize(index) {

// 当我们选择每页显示几条数据的时候这个index就会赋值到this.pageSize中

this.pageSize = index;

this.getTable();

changePage(index){

// 将剩下的表格数据进行拆分显示数据

当第一页的时候 index = 0 第一页从0开始显示10数据

当第二页的时候 index = 1 第二页从第10条开始，显示10条数据......以次类推

this.tableData = this.tableData2.slice((index - 1)*this.pageSize,index*this.pageSize);

this.pageNum = index;

this.getTable();

那么这个功能就实现了，哪里不对的地方还望指正！！！

iview 带有Page分页组件集合的复杂表格相关推荐

iview page分页组件的集成
iview page分页组件的集成今天给大家分享一下iview page分页组件与iview table表格的集成,主要是针对前端集成,整个前端采用vue渲染,首先我们查看一 ...
vue element-ui之分页组件的封装
目录为什么要封装分页组件? 分页组件的封装如何使用? 为什么要封装分页组件? 分页组件用的最多的就是和表格一起,构成表格数据的翻页显示,当然也不仅限于表格,例如其它的流式加载.图片分批次加载等,都 ...
iView UI 使用page分页添加跳转按钮-输入页码后点击跳转
使用电梯,快速跳转到某一页在iview里,分页组件的电梯功能输入页码后需要按回车才能跳转这让不知道需要按回车的人摸不着头脑呀,所以呢,动动手写个跳转按钮~ <div class=" ...
使用 java 的 displaytag1.2 分页组件使用步骤
今天我的小博客项目写完了,心情挺好,发表篇 java web开发的分页组件使用技巧吧,在这里面, 我不想啰嗦,直接我把我的使用方式写了出来,希望给我们为 java 分页节省更多的时间做更 ...
组件分页_如何创建分页组件
组件分页 The theme for week #17 of the Weekly Coding Challenge is: 每周编码挑战第17周的主题是: 分页 (Pagination) A Pag ...
Vue3 element-ui实现Pagination分页组件--封装分页
什么是Pagination分页组件? 在 B 端的 web 开发中,分页组件或者叫分页器,是较为常用的控件之一,通常配合表格或列表,实现数据量大的情况下,分页拆解数据的功能. 1.scrollTo和滚 ...
电子商务系统的设计与实现(十三)：分页组件，从前到后，从JS到Java
一.概述学习实践Web开发5年多了,直到今天,我才算真正实现了最基本最常用的分页组件. 包括: a.前端JS异步加载并渲染: b.前端JSP.Freemarker.Struts ...
YII2中分页组件的使用
当数据过多,无法一页显示时,我们经常会用到分页组件,YII2中已经帮我们封装好了分页组件. 首先我们创建操作数据表的AR模型: <?phpnamespace app\models;use yii ...
Python分页组件
分页组件的实现: class Pagination(object):"""自定义分页"""def __init__(self,current ...

iview 带有Page分页组件集合的复杂表格

iview 带有Page分页组件集合的复杂表格相关推荐

最新文章

热门文章