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="time" label="时间">
      <template slot-scope="scope">
        <div style="display: flex; align-items: center">
          <custom-component @show-derivative-data="showDerivativeData(scope.row)"></custom-component>
          {{ scope.row.time }}
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

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

export default {
  components: {
    CustomComponent
  },
  data() {
    return {
      tableData: [
        { name: '张三', time: '2022-01-01', isExpanded: false },
        { name: '李四', time: '2022-01-02', isExpanded: false },
        { name: '王五', time: '2022-01-03', isExpanded: false }
      ]
    }
  },
  methods: {
    showDerivativeData(row) {
      // 调用后台接口获取衍生时间数据并插入到表格中
      const derivativeData = [
        { name: '张三的衍生时间1', time: '2022-01-01 01:00:00' },
        { name: '张三的衍生时间2', time: '2022-01-01 02:00:00' }
      ]
      const index = this.tableData.indexOf(row)
      this.tableData.splice(index + 1, 0, ...derivativeData)
      row.isExpanded = true
    },
    hideDerivativeData(row) {
      // 隐藏衍生时间数据并将标记设置为 false
      const index = this.tableData.indexOf(row)
      let i = index + 1
      while (i < this.tableData.length && !this.tableData[i].hasOwnProperty('name')) {
        this.tableData.splice(i, 1)
      }
      row.isExpanded = false
    }
  }
}
</script>

在上面的代码中，我将时间列的值直接渲染到模板中，并在前面加入了一个自定义组件。在组件中，我使用 `this.$parent.$emit` 方法触发了一个 `show-derivative-data` 事件，并将当前行的时间值作为参数传入。在表格组件中监听该事件，触发后，调用后台接口获取衍生时间数据，并将其插入到表格中点击图标的那一行下面。在隐藏衍生时间数据时，我使用了一个 `while` 循环来删除该行之后所有没有 `name` 属性的数据，以此来实现隐藏衍生数据的效果。