element-UI 表格修复：告别额外横线

2024-02-16 20:24:12

被遗忘的表格线：修复 element-UI 中的额外横线问题

对于使用 element-UI 的开发者来说，表格中的额外横线是一个令人抓狂的问题。虽然有许多解决方案，但大多数要么很复杂，要么无法解决问题。在这篇文章中，我们将深入探讨导致此问题的根本原因，并提供一种简单易行的解决方案。

罪魁祸首：未分组的表头

当表格表头中存在未分组的列时，就会出现额外的横线。例如，考虑以下 HTML 代码：

<el-table>
  <thead>
    <tr>
      <th>名称</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>30</td>
      <td>工程师</td>
    </tr>
  </tbody>
</el-table>

由于表头未分组，表格会显示一条额外的横线。要解决此问题，只需将表头分组，如下所示：

<el-table>
  <thead>
    <tr>
      <el-table-column prop="name">名称</el-table-column>
      <el-table-column prop="age">年龄</el-table-column>
      <el-table-column prop="occupation">职业</el-table-column>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>30</td>
      <td>工程师</td>
    </tr>
  </tbody>
</el-table>