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>