elementUI表格某一列加一个图标点击图标掉接口展示那一行衍生开的几条数据再次点击数据隐藏恢复之前的数据怎么实现

好的，这是一个比较复杂的需求，需要一些代码实现。我这里提供一种基本思路供您参考：

1. 首先在表格中需要加入一个自定义组件，在该组件中加入一个图标，可以使用 ElementUI 的 `el-icon` 图标。

2. 在自定义组件中，可以使用 `this.$parent.$emit 方法触发一个自定义事件，例如 `show-derivative-data` 事件。

3. 在表格组件中监听该事件，触发后调用后台接口获取生数据，并将其插入到表格中点击图标的那一行下面。

4. 同时，将该行的数据标记为已展开状态，可以使用一个 `isExpanded` 的标记来记录。

5. 再次点击图标时，判断该行的 `isExpanded` 标记，如果为 true，则隐藏衍生数据并将标记设置为 false，否则恢复之前的数据并将标记设置为 true。

具体实现可以参考如下代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <div style="display: flex; align-items: center">
          <el-icon class="expand-icon" @click="expand(scope.row)">{{ scope.row.isExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down' }}</el-icon>
          <custom-component @show-derivative-data="showDerivativeData(scope.row)"></custom-component>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import CustomComponent from './CustomComponent.vue'

export default {
  components: {
    CustomComponent
  },
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, isExpanded: false },
        { name: '李四', age: 20, isExpanded: false },
        { name: '王五', age: 22, isExpanded: false }
      ]
    }
  },
  methods: {
    expand(row) {
      row.isExpanded = !row.isExpanded
      if (row.isExpanded) {
        this.$parent.$emit('show-derivative-data', row.id)
      } else {
        this.hideDerivativeData(row)
      }
    },
    showDerivativeData(row) {
      // 调用后台接口获取衍生数据并插入到表格中
      const derivativeData = [
        { name: '张三的衍生数据', age: 18 },
        { name: '张三的衍生数据2', age: 20 }
      ]
      const index = this.tableData.indexOf(row)
      this.tableData.splice(index + 1, 0, ...derivativeData)
    },
    hideDerivativeData(row) {
      // 隐藏衍生数据并将标记设置为 false
      const index = this.tableData.indexOf(row)
      let i = index + 1
      while (i < this.tableData.length && !this.tableData[i].hasOwnProperty('id')) {
        this.tableData.splice(i, 1)
      }
    }
  }
}
</script>

在上面的代码中，我使用了一个 `isExpanded` 的标记来记录该行的展开状态。在点击图标时，会触发 `expand` 方法，该方法会将 `isExpanded` 标记取反，并根据标记状态来调用 `showDerivativeData` 或 `hideDerivativeData` 方法。在 `showDerivativeData` 方法中，会调用后台接口获取衍生数据，并将其插入到表格中点击图标的那一行下面。在 `hideDerivativeData` 方法中，会隐藏衍生数据并将标记设置为 false。

当然，这只是一个基本的思路，实际的实现还需要根据具体的业务需求进行调整。