需求是点击后请求接口数据，然后展示在下方

截图20211110165600.png

使用的是expand-change事件处理。

1. 直接往表格中每一行添加的一个字段，用于在下方展示。表格出现了需要点击两下，表格才会重新刷新。 使用了dolayout和 this.$forceUpdate() 都没有作用。
   解决办法：后来采用的是将表格重新赋值。2. 表格出现可以刷新，但是会闪一下，并且点不开。
   解决办法：后面加上 row-key="id"，正常了

  <el-table ref="table" row-key="id" :data="rows" size="mini" header-cell-class-name="header-bg" @expand-change="load">
    <el-table-column type="expand">
      <template slot-scope="scope">
          //表格点击后中展示的地方
      </template>
    </el-table-column>
    <el-table-column label="出发港" width="100">
      <template slot-scope="scope">
        {{ scope.row.pol }}
      </template>
    </el-table-column>
  </el-table>

    async load(row) {
      const res = await matrixDetail.get({ matrixId: row.id })
      const tables = this.rows
      tables.forEach((item, index) => {
        if (item.id === row.id) {
          item['units'] = res.content
        }
      })
      this.rows = JSON.parse(JSON.stringify(tables))
    },