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);}
}
}