elementui expand-row-keys展开子table

画面效果图

代码片段

<el-table :row-key="getRowKeys" @row-click="rowClick" :expand-row-keys="expands" @expand-change="expandChange"
:header-cell-style="{'text-align':'center'}" :cell-style="{'padding':'0px'}" :border="true" 
:data="monthstillTableData" stripe style="width: 100%;">
 <el-table-column type="expand">
 <template slot-scope="props">
    <el-table ref="multipleTable" :header-cell-style="{background:'#b5b5b5','text-align':'center','padding':'0px'}"
     :cell-style="{'padding':'0px'}" :border="true" :data="props.row.repaymentList" style="width: 100%;">
      <!-- 应收期数 -->
      <el-table-column width="100" :show-overflow-tooltip="true" prop="receivableNum" :label="$t('SCM401.S6')" 
      align="center"></el-table-column>
      <!-- 应收日期 -->
      <el-table-column :show-overflow-tooltip="true" prop="receivableDate" :label="$t('SCM401.S15')" align="center">
        <template slot-scope="scope">{{scope.row.receivableDate|dateformat}}</template>
      </el-table-column>
      <!-- 应收金额 -->
      <el-table-column :show-overflow-tooltip="true" prop="receivablePrice" :label="$t('SCM407.S23')" align="right">
        <template slot-scope="scope">{{scope.row.receivablePrice|numformat}}</template>
      </el-table-column>
      <!-- 已收金额（含未核销） -->
      <el-table-column :show-overflow-tooltip="true" prop="receivedPrice" :label="$t('SCM407.S24')" align="right">
        <template slot-scope="scope">{{scope.row.receivedPrice|numformat}}</template>
      </el-table-column>
    </el-table>
  </template>
  </el-table-column>
  <!-- 机型/机号 -->
  <el-table-column :show-overflow-tooltip="true" :label="$t('SCM702.S19')" align="left">
    <template v-if="scope.row.modelNo" slot-scope="scope">{{scope.row.modelName}}/{{scope.row.modelNo}}
    </template>
    <template v-else slot-scope="scope">{{scope.row.modelName}}</template>
  </el-table-column>
  <!-- PIN码 -->
  <el-table-column :show-overflow-tooltip="true" prop="pinCode" :label="$t('SCM802.S13')" align="center">
  </el-table-column>
  <!-- 合同编码 -->
  <el-table-column :show-overflow-tooltip="true" prop="accountNum" :label="$t('SCM604.S4')" align="center">
  </el-table-column>
  <!-- 债权类型 -->
  <el-table-column :show-overflow-tooltip="true" prop="scmTypeName" :label="$t('SCM301.S07')" align="center">
  </el-table-column>
  <!-- 应收期数 -->
  <el-table-column width="80" :show-overflow-tooltip="true" prop="receivableNumSum" :label="$t('SCM401.S6')" 
  align="center">
  </el-table-column>
  <!-- 应收金额（元） -->
  <el-table-column width="100" :show-overflow-tooltip="true" prop="receivableSum" :label="$t('SCM407.S13')" 
  align="right">
    <template slot-scope="scope">{{scope.row.receivableSum|numformat}}</template>
  </el-table-column>
  <!-- 已收期数 -->
  <el-table-column width="80" :show-overflow-tooltip="true" prop="receivedNumSum" :label="$t('SCM404.S16')"
   align="center">
  </el-table-column>
  <!-- 已收金额（元） -->
  <el-table-column width="100" :show-overflow-tooltip="true" prop="receivedSum" :label="$t('SCM407.S14')" 
  align="right">
    <template slot-scope="scope">{{scope.row.receivedSum|numformat}}</template>
  </el-table-column>
  <!-- 应收余额（元） -->
  <el-table-column width="100" :show-overflow-tooltip="true" prop="receivableRemainSum" :label="$t('SCM407.S15')"
   align="right">
    <template slot-scope="scope">{{scope.row.receivableRemainSum|numformat}}</template>
  </el-table-column>
  <!-- 逾期金额（元） -->
  <el-table-column width="100" :show-overflow-tooltip="true" prop="overdueAmount" :label="$t('SCM407.S16')" 
  align="right">
    <template slot-scope="scope">{{scope.row.overdueAmount|numformat}}</template>
  </el-table-column>
</el-table>
export default {
data() {
   return {
   	expands: []，
   	monthstillTableData:[],
    getRowKeys(row) {
        return row.accountId;
      }
   	}
   }，
   methods:{
	expandChange(row, expandedRows) {
      Array.prototype.remove = function(val) {
        let index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      if (this.expands.indexOf(row.accountId) < 0) {
		that.expands = [];
	}else {
       this.expands.remove(row.accountId);
       that.expands = [];
        }
   },
    rowClick(row, event, column) {
      //点击列展开行
      this.expandChange(row, column);
    }
}
}