elementUI el-table组件展开下级表格和分页案例

<template>
　　<el-table :data="tableData" @row-click = "onRowClick" :row-class-name="tableRowClassName" @expand-change="expandRow"
     :expand-row-keys='expands' :row-key='getRowKeys' style="width: 100%" >
      <el-table-column type="expand" prop="desc">
        <template slot-scope="scope">
            <el-table :data="scope.row.desc" style="width: 100%">
               <el-table-column
                    v-for="(item,index) in tableColumnsChild"
                    :key="index"
                    :prop="item.paramKey"
                    :label="item.paramName"
                    align="center"
                ></el-table-column>
            </el-table>
            <el-pagination v-if="scope.row.resTotalChild>0==true" background :page-size="scope.row.pageSizeChild" :pager-count="5" :current-page="scope.row.pageNumChild"
            layout="total,prev, pager, next" :total="scope.row.resTotalChild" @current-change="handleCurrentPageChangeChild($event,scope.$index)"></el-pagination>
        </template>
      </el-table-column>
       <el-table-column
          v-for="(item,index) in tableColumns"
          :key="index"
          :prop="item.paramKey"
          :label="item.paramName"
          align="center"
        ></el-table-column>
    </el-table>
    <el-pagination v-if="resTotal>0==true" background :page-size="pageSize" :pager-count="5" :current-page="pageNum"
      layout="total,prev, pager, next" :total="resTotal" @current-change="handleCurrentPageChange"></el-pagination>
  </el-container>
</template>

data（）{
　　return{

　　　　pageNum: 1, 　　　　pageSize: 10, 　　　　resTotal: 0, 　　　　pageNumChild: 1, 　　　　pageSizeChild: 10, 　　　　resTotalChild: 0, 　　　　tableColumns: [], 　　　　tableData: [], 　　　　tableColumnsChild: [], 　　　　loading: false, 　　　　expendRow:false, 　　　　getExpandedRow:'', 　　　　expands:[], 　　　　getRowKeys (row) { 　　　　　　return row.examinationId 　　　　}, 　　　　currentRowIndex:'',

　　}
}

<script>
  tableRowClassName({row, rowIndex}) {
        row.row_index = rowIndex;
    },
    onRowClick (row, event, column) {
        this.currentRowIndex = row.row_index;
    },
    expandRow:function(row, expandedRows) {
        var _this = this;
        const index = _this.tableData.findindex(data => data.id === row.id) //父分组的下标
        _this.$set(_this.tableData[index], 'pageNumChild', 1)
        _this.$set(_this.tableData[index], 'pageSizeChild', 10)
        if(_this.expands.indexOf(row.id) >= 0){
            //收起当前行
            var newExpands=[];
            for(var i=0;i<this.expands.length;i++){
                if(this.expands[i]!=row.id){
                    newExpands.push(this.expands[i]);
                }
            }
            _this.expands=newExpands;
            return;
        }else{
            _this.expands.push(row.id); 
            _this.expendRow=true;
            _this.getTableColumns();
            if (!row.desc) {
                _this.getSubTableData(row,expandedRows);
            }
        }
    },
    getSubTableData(row,expanded){
        let _this = this
        const index = _this.tableData.findindex(data => data.id === row.id) //父分组的下标
        let params={
            id: row.id,
            pageNum: row.pageNumChild,
            pageSize: row.pageSizeChild
        }
        this.$axios({
            method: "post",
            url: "url",
            data: { param: JSON.stringify(params) }
        })
        .then(rspData => { 
            if (rspData.data.success == true && rspData.data.obj != null) {
                rspData.data.obj.list.forEach(item => { 
　　　　　　　　　　　　//给每个子分组都加上父分组的唯一键
                    item.id = row.id;           
                })
                _this.$set(_this.tableData[index], 'desc', rspData.data.obj.list) //给对应父表格加上desc属性，再把rspData绑定到desc这个key里
                _this.$set(_this.tableData[index], 'resTotalChild', rspData.data.obj.total)
            }else{
                _this.$set(_this.tableData[index], 'resTotalChild', 0)
            }
        }) 
    },

　　handleCurrentPageChangeChild(val,index) { 　　　　this.$set(this.tableData[index], 'pageNumChild', val) ; 　　　　this.getSubTableData(this.tableData[index]) 　　},

</srcipt>