vue2根据选中的日期动态渲染表格的列

根据用户选中日期在点击查询，表格的表头会根据查询的时间渲染，如果查询的是当前时间渲染的是00时～15时，如果查询的是上一天或者上几天渲染的是00时～23时，并且渲染后整个表格的样式不会乱

<template>
  <div class="esi">
    <!-- 顶部日期选择和操作按钮 -->
    <div class="esi_top">
      <div>
        日期1：
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </div>
      <el-button type="primary" @click="queryData">查询</el-button>
    </div>
    <!-- 表格展示区域 -->
    <div class="esi_but" :class="{'custom-style': isCustomStyle}">
      <el-table
        :key="tableKey"
        ref="myTable"
        :data="tableData"
        border
        height="100%"
        show-summary
        style="width: 100%; height: 100%; overflow: auto"
      >
        <el-table-column type="selection" width="55" fixed> </el-table-column>
        <el-table-column fixed prop="date" label="电站名称" width="120">
          <template slot-scope="scope">
            <span
              style="
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
              >{{ scope.row.date }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="name" label="额定交流功率(kW)" width="140"></el-table-column>
        <el-table-column prop="province" label="组件峰值功率(kWp)" width="140"></el-table-column>
        <el-table-column
          v-for="(hour, index) in displayedHours"
          :key="hour.prop"
          prop="city"
          :label="hour.label"
          width="100"
        ></el-table-column>
        <el-table-column prop="zip" label="合计"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "", // 绑定的日期选择器值
      tableData: [
        // 表格数据
        {
          date: "江苏安科",
          name: "0",
          province: "0.98",
          city: "8.18",
          address: "12.5",
          zip: "17.41",
        },
        {
          date: "江苏安科",
          name: "0",
          province: "0.98",
          city: "8.18",
          address: "12.5",
          zip: "17.41",
        },
        {
          date: "江苏安科",
          name: "0",
          province: "0.98",
          city: "8.18",
          address: "12.5",
          zip: "17.41",
        },
      ],
      isCustomStyle: false, // 是否应用自定义样式
      displayedHours: Array.from({ length: 24 }, (_, i) => ({ prop: `hour${i}`, label: `${i.toString().padStart(2, '0')}时` })), // 显示的小时列
      tableKey: 0, // 表格的唯一键，用于强制重新渲染
    };
  },
  methods: {
    // 查询按钮点击事件
    queryData() {
      const selectedDate = new Date(this.value1);
      const today = new Date();
      today.setHours(0, 0, 0, 0);

      if (selectedDate.getTime() === today.getTime()) {
        // 选择的是今天
        const currentHour = new Date().getHours();
        this.displayedHours = Array.from({ length: currentHour + 1 }, (_, i) => ({ prop: `hour${i}`, label: `${i.toString().padStart(2, '0')}时` }));
      } else {
        // 选择的是之前的日期
        this.displayedHours = Array.from({ length: 24 }, (_, i) => ({ prop: `hour${i}`, label: `${i.toString().padStart(2, '0')}时` }));
      }

      this.tableKey += 1; // 更新 tableKey 强制重新渲染表格
    },
  },
  watch: {
    displayedHours: {
      deep: true,
      handler(newValue, oldValue) {
        // 在这里处理数据变化时的逻辑，避免影响样式
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.esi {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;

 .esi_top {
    width: 100%;
    height: 8%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }

 .esi_but {
    width: 100%;
    height: 91.5%;

    &.custom-style {
      background-color: #f0f0f0; // 自定义样式
      border: 1px solid #ccc;
    }
  }
}
</style>

主要：

确保列的唯一性
在 el-table-column 中使用 :key 绑定一个唯一的值：

<el-table-column
  v-for="(hour, index) in displayedHours"
  :key="hour.prop"
  prop="city"
  :label="hour.label"
  width="100">
</el-table-column>

添加tableKey: 0

  data() {
    return {
        tableKey: 0  // 添加 tableKey
           }
         }

点击查询后更新 tableKey 强制重新渲染表格

methods: {
    // 查询按钮点击事件
    queryData() {
      const selectedDate = new Date(this.value1);
      const today = new Date();
      today.setHours(0, 0, 0, 0);

      if (selectedDate.getTime() === today.getTime()) {
        // 选择的是今天
        const currentHour = new Date().getHours();
        this.displayedHours = Array.from({ length: currentHour + 1 }, (_, i) => ({ prop: `hour${i}`, label: `${i.toString().padStart(2, '0')}时` }));
      } else {
        // 选择的是之前的日期
        this.displayedHours = Array.from({ length: 24 }, (_, i) => ({ prop: `hour${i}`, label: `${i.toString().padStart(2, '0')}时` }));
      }

      this.tableKey += 1; // 更新 tableKey 强制重新渲染表格
    },
  },}