前言:
这里的表格数据为通过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 = true
post('你们自己的接口',{
token:this.token,
})
.then(response =>{
this.tableloading = false
if (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();
},
那么这个功能就实现了,哪里不对的地方还望指正!!!