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){
        //shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
        expandedRows.shift();
      }     
    },