el-table 动态生成列

<template>
    <el-table
            :data="tableData"
            :cell-style="{ 'text-align': 'center' }"
            :header-cell-style="{
                  background: '#c0c1c4',
                  color: '#1e1f22',
                  height: '35px',
                  'text-align': 'center'
              }"
            border stripe
            max-height="580"
            style="margin-top: 2vh"
          >
            <el-table-column align="center" label="电表名称" prop="name"/>
            <!-- 动态生成日期列 -->
            <el-table-column
              v-for="date in sortedDates"
              :key="date"
              :label="date"
              :prop="date"
            >
              <template #default="{ row }">
                <span>{{ row[date] || '' }}</span>
              </template>
            </el-table-column>
    </el-table>
</template>

<script setup lang="ts" name="dayTotal">

const tableData = ref([]) // 用于展示的数组
const allDates = ref(new Set()); // / 提取所有日期字段并去重

// 按照接口返回的数据中
// 按日期排序
const sortedDates = computed(() => {
  return Array.from(allDates.value).sort((a, b) => {
    const dayA = parseInt(a);
    const dayB = parseInt(b);
    return dayA - dayB;
  });
});


const getList = () => {
    const data = await dailyApi.getPage(queryParams)
    tableData.value = data.list[0]
    total.value = data.total


    // 收集数据中的所有日期
    tableData.value.forEach(item => {
      Object.keys(item).forEach(key => {
        if (key.endsWith("日")) {
          allDates.value.add(key);
        }
      });
    });

}
getList()

</script>