前端渲染, 五个表格 分别是L1,L2V,L2B,L2C,LP, 后端返回数据是一个List里面是实体包含 qualLv字段对应(L1,L2V,L2B,L2C,LP), trainingStartDate字段, trainingEndDate字段, courseName 字段. 返回时可能1条也可能是5条, 实体中的qualLv用于判断渲染到哪个表格, 其他字段也需要渲染出来,有对应的qualLv渲染到对应的表格内, 没有值表格也需要存在, 不显示值. 前端使用的Vue

根据您的需求，可以将前端渲染分为以下步骤：

1. 在前端创建五个表格：L1、L2V、L2B、L2C、LP。

2. 后端返回数据是一个 List，我们可以通过循环遍历这个 List 中的实体，然后根据 qualLv 字段的值将实体渲染到对应的表格中。

3. 定义一个 computed 属性，用于将 List 中的实体按照 qualLv 分组，即将 qualLv 相同的实体放到同一个数组中。

4. 在 Vue 中使用 v-for 指令循环遍历每个分组，然后在每个分组中再次使用 v-for 指令遍历该分组中的每个实体，并将实体的字段渲染到对应的表格中。

5. 如果某个表格中没有数据，则需要在该表格中显示一个空行或者其他占位符，保证该表格的存在。

下面是一份示例代码，供您参考：

<template>
  <div>
    <!-- L1 表格 -->
    <table>
      <thead>
        <tr>
          <th>Training Start Date</th>
          <th>Training End Date</th>
          <th>Course Name</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in L1" :key="item.id">
          <td>{{ item.trainingStartDate }}</td>
          <td>{{ item.trainingEndDate }}</td>
          <td>{{ item.courseName }}</td>
        </tr>
        <!-- 如果 L1 表格中没有数据，则显示一个空行 -->
        <tr v-if="L1.length === 0">
          <td colspan="3">&nbsp;</td>
        </tr>
      </tbody>
    </table>

    <!-- L2V 表格 -->
    <table>
      <thead>
        <tr>
          <th>Training Start Date</th>
          <th>Training End Date</th>
          <th>Course Name</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in L2V" :key="item.id">
          <td>{{ item.trainingStartDate }}</td>
          <td>{{ item.trainingEndDate }}</td>
          <td>{{ item.courseName }}</td>
        </tr>
        <!-- 如果 L2V 表格中没有数据，则显示一个空行 -->
        <tr v-if="L2V.length === 0">
          <td colspan="3">&nbsp;</td>
        </tr>
      </tbody>
    </table>

    <!-- L2B 表格 -->
    <table>
      <thead>
        <tr>
          <th>Training Start Date</th>
          <th>Training End Date</th>
          <th>Course Name</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in L2B" :key="item.id">
          <td>{{ item.trainingStartDate }}</td>
          <td>{{ item.trainingEndDate }}</td>
          <td>{{ item.courseName }}</td>
        </tr>
        <!-- 如果 L2B 表格中没有数据，则显示一个空行 -->
        <tr v-if="L2B.length === 0">
          <td colspan="3">&nbsp;</td>
        </tr>
      </tbody>
    </table>

    <!-- L2C 表格 -->
    <table>
      <thead>
        <tr>
          <th>Training Start Date</th>
          <th>Training End Date</th>
          <th>Course Name</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in L2C" :key="item.id">
          <td>{{ item.trainingStartDate }}</td>
          <td>{{ item.trainingEndDate }}</td>
          <td>{{ item.courseName }}</td>
        </tr>
        <!-- 如果 L2C 表格中没有数据，则显示一个空行 -->
        <tr v-if="L2C.length === 0">
          <td colspan="3">&nbsp;</td>
        </tr>
      </tbody>
    </table>

    <!-- LP 表格 -->
    <table>
      <thead>
        <tr>
          <th>Training Start Date</th>
          <th>Training End Date</th>
          <th>Course Name</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in LP" :key="item.id">
          <td>{{ item.trainingStartDate }}</td>
          <td>{{ item.trainingEndDate }}</td>
          <td>{{ item.courseName }}</td>
        </tr>
        <!-- 如果 LP 表格中没有数据，则显示一个空行 -->
        <tr v-if="LP.length === 0">
          <td colspan="3">&nbsp;</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
    };
  },
  computed: {
    L1() {
      return this.dataList.filter((item) => item.qualLv === "L1");
    },
    L2V() {
      return this.dataList.filter((item) => item.qualLv === "L2V");
    },
    L2B() {
      return this.dataList.filter((item) => item.qualLv === "L2B");
    },
    L2C() {
      return this.dataList.filter((item) => item.qualLv === "L2C");
    },
    LP() {
      return this.dataList.filter((item) => item.qualLv === "LP");
    },
  },
  mounted() {
    // 发送请求获取数据列表
    this.getDataList();
  },
  methods: {
    async getDataList() {
      try {
        const res = await fetch("/api/data/list");
        if (res.ok) {
          const data = await res.json();
          this.dataList = data;
        }
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>