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 = 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();

            },

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