创建动态数据表Vue JS

Question

我需要构建一个数据表/ svg图，如下图所示，所以我们的想法是我们将使用axios获取数据，例如部门和项目是什么以及特定部门有多少员工在工作在特定项目上（基本上是计数）。我可以为项目或具有b表的部门建立表

但是我需要它们既是列标题又是水平标题

*对不起模糊的图片

Answer 1

如果我了解您要基于departments，projects和employees动态创建表格，那么您可以快速查看每个department中有多少个正在处理给定project。

我尝试动态地执行此操作（使用模拟数据，因为我不知道您的数据的结构） https://codepen.io/Hiws/pen/qBWywdM?editors=1010

Answer 2

仅使用<table>标签

会容易得多

 <table class='table table-dark' border='2px'>
  <thead>
    <tr>
      <th scope='col'>Id</th>
      <th scope='col'>Name</th>
      <th scope='col'>Department</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for='(emp,index) in employee' :key='index' :employee='employee'>
      <td>{{ emp.id }}</td>
      <td>{{ emp.name }}</td>
      <td>{{ emp.department }}</td>
    </tr>
  </tbody>
</table>

我已经使用axios检索数据，并且以此方式生成了动态表。另外，您也可以使用bootstrap表对其进行样式设置。