前端渲染, 五个表格 分别是L1到L5, 后端返回数据是一个List里面是实体可能1个也可能5个, 实体有多个字段 其中包含了L1到L5用于判断,有值渲染到对应的表格内, 没有值表格也需要存在, 但不显示值. 前端使用的Vue

可以先在前端定义好五个表格的结构，然后通过Vue中的v-for指令循环渲染这五个表格，并且为每个表格添加一个v-if判断条件，判断该表格对应的实体是否存在，如果存在则显示对应的值，否则不显示任何内容。

具体实现步骤如下：

1. 在Vue组件中定义五个表格的结构，可以使用HTML table标签实现。

2. 在Vue组件的data中定义一个实体列表的变量，用于存放后端返回的数据。

3. 在Vue组件的mounted生命周期钩子函数中，通过Ajax请求获取后端数据，并将数据存放到实体列表变量中。

4. 在Vue组件的模板中使用v-for指令循环渲染五个表格，并为每个表格添加一个v-if判断条件，判断该表格对应的实体是否存在，如果存在则显示对应的值，否则不显示任何内容。

下面是一个简单的代码示例：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>L1</th>
          <th>L2</th>
          <th>L3</th>
          <th>L4</th>
          <th>L5</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="entityList.length > 0">
          <td v-if="entityList[0].L1">{{ entityList[0].L1 }}</td>
          <td v-if="entityList[0].L2">{{ entityList[0].L2 }}</td>
          <td v-if="entityList[0].L3">{{ entityList[0].L3 }}</td>
          <td v-if="entityList[0].L4">{{ entityList[0].L4 }}</td>
          <td v-if="entityList[0].L5">{{ entityList[0].L5 }}</td>
        </tr>
        <tr v-else>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
    <!-- 循环渲染其他四个表格 -->
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      entityList: []
    }
  },
  mounted() {
    axios.get('/api/entity-list')
      .then(response => {
        this.entityList = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>