vue动态生成table的表头和表体

vue动态生成table的表头和表体

页面代码

<template>
      <div style="margin-top:400px;" class="content">损失分布</div>
        <div class="text item">
          <el-table :data="lossTable" style="width: 100%">
            <el-table-column prop="errorPosition" label="故障位置" width="180"></el-table-column>
            <el-table-column prop="errorDesc" label="停机描述" width="250"></el-table-column>
            <el-table-column v-for="col in cols" :key="col.prop" :prop="col.prop" :label="col.label">
            </el-table-column>
          </el-table>
        </div>
      </div>
</template>

<script>
import comp from '@/api/historyInfor/OEEComprehensive.js'

export default {
  data() {
    return {
      cols: [],
      lossTable: []
    }
  },
  created() {},
  methods: {
    findTopDetails(params) {
      // 此处应根据params查询相应的详细数据
      this.dayDetailParam.day = params
      this.dayDetailParam.macPositionSysNo = this.productLine

      comp.GetOEEDayDetail(this.dayDetailParam).then((val) => {
          his.cols = val.data.modelLossTableList.cols
          this.lossTable = val.data.modelLossTableList.lossTable
        }
        this.loading = false
      })

      this.showDetails = true
    },


  },
}
</script>

后台数据

        /// <summary>
        /// 损失分布表格数据
        /// </summary>
        /// <param name="startDt"></param>
        /// <param name="sortDictionary"></param>
        /// <returns></returns>
        private ModelLossTableList GetTableData(DateTime startDt, Dictionary<string, List<ModelAggData>> sortDictionary)
        {
            ModelLossTableList mtList = new ModelLossTableList();
            //取到所有数据 进行处理[包含班次和停机信息]

            //构造表格数据
            double dateTime = 0;
            //如果开始开始时间不是整点 则会多循环一次
            int timeCount = startDt.Minute == 0 ? 24 : 25;

            for (int i = 0; i < timeCount; i++) //循环24小时  创建数据
            {
                var startTime = startDt.AddHours(i);
                var endTime = startDt.AddHours(i + 1);
                if (i == 0)
                {
                    endTime = Convert.ToDateTime(endTime.ToString("yyyy-MM-dd HH:00:00"));
                    dateTime = 60 - (startDt.AddHours(i + 1) -
                                     Convert.ToDateTime(endTime.ToString("yyyy-MM-dd HH:00:00"))).TotalMinutes;
                    startDt = endTime.AddHours(-1);
                }
                if (i == 24)
                {
                    endTime = startTime.AddMinutes(dateTime);
                }

                ModelColumn mc = new ModelColumn();
                mc.Label = (startTime.Minute == 0 ? startTime.ToString("HH") : startTime.ToString("HH:mm")) +
                           "-" + (endTime.Minute == 0 ? endTime.ToString("HH") : endTime.ToString("HH:mm")) +
                           "点";
                mc.Prop = "time" + i;
                mc.Type = "normal";
                mtList.Cols.Add(mc);

            }

            foreach (KeyValuePair<string, List<ModelAggData>> gpPair in sortDictionary)
            {
                if (gpPair.Value != null && gpPair.Value.Count > 0)
                {
                    Dictionary<string, string> ma = new Dictionary<string, string>();

                    List<string> strList = new List<string>(gpPair.Key.Split(","));

                    if (string.IsNullOrEmpty(strList[1]))
                    {
                        ma["errorPosition"] = gpPair.Value[0].MacPositionName;
                    }
                    else
                    {
                        ma["errorPosition"] = gpPair.Value[0].MacPositionName + " " + gpPair.Value[0].MacStationName;
                    }
                    ma["errorDesc"] = gpPair.Value[0].ErrorId + " " + gpPair.Value[0].ErrorName;

                    for (int j = 0; j < timeCount; j++)
                    {
                        var startTime = startDt.AddHours(j);
                        var endTime = startDt.AddHours(j + 1);
                        ma["time" + j] = gpPair.Value.Count(m => m.StartTime <= endTime && m.EndTime >= startTime).ToString();
                    }
                    mtList.LossTable.Add(ma);
                    
                    
                }
            }

            return mtList;
        }```