element-ui表格合并行和列的究极解决方案

2023-01-27 00:14:27

使用 Element UI 表格合并行和列的终极指南

简介

作为一名后端程序员，我最近需要编写一个前端页面，其中涉及使用 Element UI 表格组件。起初，我对该组件的合并行和列功能一无所知，官方文档又含糊其辞，让我头痛不已。不过，我硬着头皮尝试了一下，发现其实也没有那么难。现在，就让我分享我的经验，希望能对你们有所帮助。

合并行

1. 单行合并

单行合并非常简单，只需在需要合并的单元格上设置 rowspan 属性即可。

<tr v-for="item in data">
  <td rowspan="2">{{ item.name }}</td>
  <td>{{ item.age }}</td>
  <td>{{ item.gender }}</td>
</tr>
<tr v-for="item in data">
  <td>{{ item.city }}</td>
  <td>{{ item.phone }}</td>
  <td>{{ item.email }}</td>
</tr>

上面代码中，第一行的姓名列将合并两行。

2. 多行合并

多行合并需要同时使用 rowspan 和 colspan 属性。

<tr v-for="item in data">
  <td rowspan="2" colspan="2">{{ item.name }}</td>
  <td>{{ item.age }}</td>
  <td>{{ item.gender }}</td>
</tr>
<tr v-for="item in data">
  <td>{{ item.city }}</td>
  <td>{{ item.phone }}</td>
  <td>{{ item.email }}</td>
</tr>

在上面的代码中，第一行的姓名列将合并两行，而第一列的年龄和性别列也将合并两行。

合并列

1. 单列合并

单列合并只需在需要合并的单元格上设置 colspan 属性。

<tr v-for="item in data">
  <td>{{ item.name }}</td>
  <td colspan="2">{{ item.age }}</td>
  <td>{{ item.gender }}</td>
</tr>

在上面的代码中，第二列的年龄列将合并两列。

2. 多列合并

多列合并也需要同时使用 rowspan 和 colspan 属性。

<tr v-for="item in data">
  <td rowspan="2">{{ item.name }}</td>
  <td colspan="2">{{ item.age }}</td>
  <td rowspan="2">{{ item.gender }}</td>
</tr>
<tr v-for="item in data">
  <td>{{ item.city }}</td>
  <td>{{ item.phone }}</td>
  <td>{{ item.email }}</td>
</tr>