前端渲染, 五个表格 分别是L1到L5, 后端返回数据可能1个也可能5个, 有值渲染到对应的表格内, 没有值表格也需要存在, 但不显示值
时间: 2023-08-14 15:03:42 浏览: 82
可以通过前端的条件渲染来实现这个需求。在前端代码中,先定义好这五个表格,并给它们一个唯一的标识符(例如:table1、table2、table3、table4、table5)。然后,在获取到后端返回的数据后,可以根据数据的数量来判断需要渲染哪些表格。如果有数据,则将数据渲染到对应的表格中,如果没有数据,则只在该表格中显示一个占位符或者空白内容即可。以下是一个简单的示例代码:
```html
<!-- HTML 代码 -->
<div id="table1"></div>
<div id="table2"></div>
<div id="table3"></div>
<div id="table4"></div>
<div id="table5"></div>
```
```javascript
// JS 代码
const data = [
{ level: 'L1', value: 'value1' },
{ level: 'L3', value: 'value3' },
{ level: 'L5', value: 'value5' },
];
// 遍历数据,根据 level 渲染到对应的表格中
data.forEach((item) => {
const tableId = `#table${item.level.substring(1)}`;
const table = document.querySelector(tableId);
if (table) {
table.innerHTML = item.value;
}
});
```
以上代码中,我们通过遍历数据的方式,根据每个数据项的 level 属性来确定需要渲染到哪个表格中,并将对应的值渲染到该表格中。如果表格不存在,则不做任何处理。