vue elementUI表格时间前面加一个图标点击图标掉接口展示那个时间衍生开多条时间数据再次点击图标隐藏恢复之前的数据怎么实现

首先，你需要在表格中添加一个图标，可以使用 ElementUI 中的 Icon 组件。然后，你需要在该图标上绑定一个点击事件，可以使用 @click 指令。

在点击事件的处理函数中，你需要向后端发送请求获取衍生的时间数据。可以使用 axios 库发送 HTTP 请求。获取到数据后，你需要将其添加到表格数据中，并且在表格中展开该行，以显示衍生时间数据。

当再次点击图标时，你需要将表格数据还原为之前的状态，并且将该行关闭，以隐藏衍生时间数据。

下面是一个示例代码，你可以参考一下：

<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">
        <el-icon @click="toggleExpand(scope.row)" :class="{'el-icon-arrow-down': scope.row.expanded, 'el-icon-arrow-right': !scope.row.expanded}"></el-icon>
      </template>
    </el-table-column>
    <el-table-column prop="extraTime" label="衍生时间" v-show="showExtraTime"></el-table-column>
  </el-table>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, expanded: false, extraTime: [] },
        { name: '李四', age: 20, expanded: false, extraTime: [] },
        { name: '王五', age: 22, expanded: false, extraTime: [] },
      ],
      showExtraTime: false,
    }
  },
  methods: {
    toggleExpand(row) {
      if (row.expanded) {
        row.expanded = false
        row.extraTime = []
        this.showExtraTime = false
      } else {
        axios.get('/api/getExtraTimeData', { params: { name: row.name } })
          .then(response => {
            row.expanded = true
            row.extraTime = response.data
            this.showExtraTime = true
          })
          .catch(error => {
            console.log(error)
          })
      }
    },
  },
}
</script>