Element中table嵌套新的table，且只能展开一行，其他关闭

这个是效果图
代码部分

    <el-table :data="orderTableData" style="width: 100%;" row-key="id" border ref="orderTableData"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        :expand-row-keys="expandRows" @expand-change="handleExpandChange">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table :data="goodTableData" style="width: 100%;" border ref="goodTableData">
....
</el-table>
          </template>
        </el-table-column>
        <el-table-column prop="outTradeNo" label="订单号" width="180">
        </el-table-column>
       ....
      </el-table>

data数据

		orderTableData: [],
      	goodListInfo: [],
     	expandRows: [],

methods

    handleExpandChange(row, expandedRows) {
    
    
      //row是点击该条的数据
      let parma = {
    
    }
      this.http
        .post("XXXX", parma)
        .then((res) => {
    
    
          if (res.rows.length != 0) {
    
    
            this.goodListInfo = res.rows;
            //以下代码是展开一行，其他都关闭
            if (this.expandRows.includes(row.id)) {
    
    
              this.expandRows = this.expandRows.filter((val) => val !== row.id);
            } else {
    
    
              if (this.expandRows.length != 0) {
    
    
                this.expandRows.splice(0, this.expandRows.length);
                this.expandRows.push(row.id);
              } else {
    
    
                this.expandRows.push(row.id);
              }
            }
          } else {
    
    
            this.$Message.error(res.message);
          }
        });
    },

需要说明的一点是主表里的数据要加一个hasChildren为true，否则不会显示下面的子表