element-ui table 只展开一行数据 table数据通过调接口获取

借鉴博客：https://blog.csdn.net/qq_31126175/article/details/79807133

需求：表格展开行只展示一行（其实是为了避开另一个问题：展开多行数据，最后一次展开的数据 会覆盖之前展开行数据）

html：

    <el-table :data=\"tableData\" @expand-change=\"rowExpand\">
      <!-- 展开行 是另一个表格 begin -->
      <el-table-column type=\"expand\" prop=\"\" >
        <template slot-scope=\"props\">
          <el-table :data=\"tableData2\">
            <el-table-column type=\"selection\"></el-table-column>
            <el-table-column prop=\"id\" v-if=\"showTableId\" label=\"任务ID\"></el-table-column>
            <el-table-column prop label=\"任务时间\" width=\"190px;\">
              <template slot-scope=\"scope\">
                {{scope.row.taskStartDate|formatDate}}-{{scope.row.taskEndDate|formatDate}}
              </template>
            </el-table-column>
            <el-table-column prop=\"taskName\" label=\"任务名称\"></el-table-column>
            <el-table-column prop=\"taskFlag\" label=\"任务状态\" :formatter=\"formatStatus\"></el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop=\"id\" v-if=\"showTableId\" label=\"任务ID\"></el-table-column>
      <el-table-column prop label=\"任务时间\">
        <template slot-scope=\"scope\">
            {{scope.row.taskStartDate|formatDate}}-{{scope.row.taskEndDate|formatDate}}
        </template>
      </el-table-column>
      <!-- 展开行 是另一个表格 end -->
      <el-table-column prop=\"taskName\" label=\"任务名称\"></el-table-column>
      <el-table-column prop=\"taskFlag\" :formatter=\"formatType\" label=\"任务状态\"></el-table-column>
    </el-table>

js:展开一行行主通过table的expend-change事件实现

    // 展开父表格数据 并查询该数据下的子数据
    rowExpand(row, expandedRows) {
      // 打印父任务内容 
      console.log(row)
      let vm = this;
      let params = {
        taskId: row.id
      };
      getSearchSubTask(params).then(res => {
        this.tableData2 = res.results;
      });
      //如果展开行数大于1
      if(expandedRows.length>1){
        expandedRows.shift();
      }     
    },