【element】 table 动态表头对应动态数据

数据格式：
item:时间
used:值

预期效果：

 <el-table :data="tableData" stripe height="200" width="50%">
     <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :label="`${item.title}`+`时`"
          :prop="item.keys"
      ></el-table-column>
  </el-table>

 data() {
    return {
      //全部数据
      tableData: [],
      //表头数据
      tableColumns: []
    }
  },
  mounted() {
 
    this.getStationPoweList()
  },

  methods: {
    getStationPoweList() {
      getBoxDay().then(res => {
     	//获取tableData的值（所有数据）
        this.tableData = res.data
        //定义temp集合
        let temp = {}
        //定义result数组接受结果值
        let result = []
        //遍历tableData,处理格式，产生key,用做数据对应的前缀
        this.tableData.forEach(i => {
          temp['value_' + i.item] = i.used
        })
        result.push(temp)
        // 处理好的值，重新赋值给tableData
        this.tableData = result
  		
  		//处理动态header,便利数组返回的值，对应键值对
        const header = res.data.map(i => ({ title: i.item, keys: 'value_' + i.item }))
        //赋值给表头数组
        this.tableColumns = header
        console.log(this.tableColumns, 'this.tableColumns')
      }).catch(err => {
        this.tableData = []
      })
    }