el-table动态生成列(多级表头)

先看效果吧

有时候我们需要通过时间区间去检索，所以这里的时间部分都是动态读取的。

那么我们需要怎么做呢？

数据格式

tableList: [
        {
          studentId: 1,
          studentName: "张三",
          date: {
            "2023-02-18": "83",
            "2023-02-19": "99",
            "2023-02-20": "91",
            "2023-02-21": "93",
            "2023-02-22": "82",
            "2023-02-23": "100",
            "2023-02-24": "100",
            "2023-02-25": "92",
            "2023-02-26": "100",
            "2023-02-27": "87",
            "2023-02-28": "100",
            "2023-02-29": "100",
          },
        },
       ......
       ]

这里的date我是写死的，要是后台获取基本也是相同的。

有数据、有需求那么我们就开始实现吧！！！

1.第一步：肯定先取列头

this.colHeadList = Object.keys(this.tableList[0].date);

2.第二步，生成多级列表，可参考element官方文档

<el-table-column label="时间" align="center">
    <el-table-column
      align="center"
      width="130"
      v-for="item in colHeadList"
      :key="item"
      :label="item"
    >
    </el-table-column>
</el-table-column>

有些人到这里就不会写了，不知道怎么取出来数据，很简单，这里的item就是列头，table的行每次渲染都是单独的唯一的，所以我们可以使用插槽取定位到对应的数据

3.第三步，取值

<el-table-column label="时间" align="center">
    <el-table-column
      align="center"
      width="130"
      v-for="item in colHeadList"
      :key="item"
      :label="item"
    >
      <template slot-scope="scope">
        <span>{{ scope.row.date[item] }}</span>
      </template>
    </el-table-column>
</el-table-column>

这样我们就可以实现上述想要的效果了。