vue 渲染表格两个表头，横向显示时间，纵向显示参数

vue 渲染表格两个表头，横向显示时间，纵向显示参数

具体使用 Element UI 中的 组件实现的 Vue 组件。它用于显示一个包含时间和参数的表格，其中时间横向显示，参数纵向显示。

<template>
  <div>
    <el-table :data="tableData" border class="computed-table">
      <!-- 横向时间表头 -->
      <el-table-column
        prop="parameter"
        label="时间"
        width="200"
        align="center"
        fixed
      >
        <el-table-column
          prop="parameter"
          label="参数"
          align="center"
          width="200"
          fixed
        >
        </el-table-column>
      </el-table-column>

      <!-- 纵向参数名表头 -->
      <el-table-column
        v-for="(time, index) in times"
        :key="index"
        :label="time"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          {{ scope.row.values[index] }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      parameters: Array.from({ length: 15 }, (_, i) => `Parameter${i + 1}`), // 参数名列表
      times: []
    }
  },
  mounted() {
    this.times = this.generateTimeLabels()
    this.tableData = this.generateTableData()
  },
  methods: {
    generateTableData() {
      const tableData = this.parameters.map(parameter => ({
        parameter: parameter,
        values: this.generateParameterValues()
      }))
      return tableData
    },
    generateParameterValues() {
      return Array.from({ length: 48 }, (_, i) =>
        Math.floor(Math.random() * 100)
      ) // 48个时间段，每30分钟一个
    },
    generateTimeLabels() {
      const times = []
      for (let hour = 0; hour < 24; hour++) {
        for (let minute = 0; minute < 60; minute += 30) {
          const time = `${hour.toString().padStart(2, '0')}:${minute
            .toString()
            .padStart(2, '0')}`
          times.push(time)
        }
      }
      return times
    }
  }
}
</script>
<style lang="scss">
.el-table {
  &.computed-table {
    thead.is-group th {
      background: none;
      padding: 0px;
    }
    thead.is-group tr:first-of-type th:first-of-type,
    thead.is-group tr:last-of-type th:first-of-type {
      background: #fff !important;
    }
    thead.is-group tr:first-of-type th:first-of-type {
      border-bottom: none;
    }
    thead.is-group tr:first-of-type th:first-of-type div.cell {
      text-align: right;
    }
    thead.is-group tr:last-of-type th:first-of-type div.cell {
      text-align: left;
    }
    thead.is-group tr:first-of-type th:first-of-type:before {
      content: '';
      position: absolute;
      width: 1px;
      height: 102px; //自行调整
      top: 0;
      left: 0;
      background-color: #808080;
      display: block;
      transform: rotate(-77deg); //自行调整
      -webkit-transform-origin: top;
      transform-origin: top;
    }
    thead.is-group tr:last-of-type th:first-of-type:before {
      content: '';
      position: absolute;
      width: 1px;
      height: 102px; //自行调整
      bottom: 0;
      right: 0;
      background-color: #808080;
      display: block;
      transform: rotate(-77deg);
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
    }
  }
}
</style>

• generateTableData(parameters, times) 方法用于生成表格的数据。

  它接受两个参数：parameters 和 times。parameters 是一个参数数组，包含了表格纵向的参数列表，而 times 是一个时间数组，包含了表格横向的时间列表。这个方法的主要作用是根据这两个数组生成一个符合格式要求的表格数据数组。

• getRandomValue() 方法用于生成一个随机的参数值。

  它使用 Math.random() 函数生成一个 0 到 1 之间的随机小数，然后将其乘以 100 并取整，得到一个 0 到 100 之间的随机整数作为参数值，并返回该值。