vue table 自定义表头和行合并的实例代码

下面是一个基于Vue的表格组件示例代码，包含自定义表头和行合并功能：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <!-- 自定义表头 -->
          <th colspan="2">姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <!-- 行合并 -->
          <template v-if="index === 0 || item.name !== tableData[index - 1].name">
            <td :rowspan="getRowCount(item.name)">{{ item.name }}</td>
          </template>
          <td>{{ item.nickname }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', nickname: '三三', age: 25, gender: '男' },
        { name: '李四', nickname: '四四', age: 28, gender: '男' },
        { name: '张三', nickname: '三三', age: 30, gender: '男' },
        { name: '王五', nickname: '五五', age: 22, gender: '女' },
      ],
    };
  },
  methods: {
    getRowCount(name) {
      let count = 0;
      for (let item of this.tableData) {
        if (item.name === name) {
          count++;
        }
      }
      return count;
    },
  },
};
</script>

在上述代码中，自定义的表头使用`colspan="2"`来合并单元格，使得“姓名”占据两列。行合并使用`getRowCount()`方法计算每个姓名相同的行的数量，然后通过`rowspan`属性设置`<td>`元素的跨行数。这样，当姓名相同的行合并在一起时，姓名单元格会跨越相应的行数。