我如何在表格中格式化我的数据

如何解决我如何在表格中格式化我的数据

我有一个动态数据，它们具有相同的楼层编号，所以我想做的是每个具有相同编号的数据都将在其楼层的一行下方。我想让每一行都是他们的一行，然后在所有这些之下是他们的单位。他们有什么图书馆吗？谢谢

const data = [
{floornumber: 1,unitname: '101',unitype: 'basic'},{floornumber: 1,unitname: '102',unitname: '103',{floornumber: 2,unitname: '203',unitype: 'basic'}

]
<table>  
<thead>
    <th>
      Floor
    </th>
    <th>
      Unit Name
    </th>
    <th>
      Unit Type
    </th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>blank</td>
      <td>101</td>
      <td>Basic</td>
    </tr>
    <tr>
      <td>blank</td>
      <td>102</td>
      <td>Basic</td>
    </tr>
    <tr>
      <td>blank</td>
      <td>103</td>
      <td>Basic</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>blank</td>
      <td>203</td>
      <td>Basic</td>
    </tr>
    <tr>
      <td>blank</td>
      <td>203</td>
      <td>Basic</td>
    </tr>
  </tbody>
</table>

解决方法

我认为没有用于此的库，因为它是一种非常独特的数据呈现方式。 您必须确保您的数据按楼层编号排序。然后我会阅读第一行并创建行集 a:

    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>blank</td>
      <td>101</td>
      <td>Basic</td>
    </tr>

遍历您的数据并创建行集 b：

    <tr>
      <td>blank</td>
      <td>102</td>
      <td>Basic</td>
    </tr>

直到楼层号改变。在这种情况下，再次创建行集 a 依此类推，直到数据结束。