vue table列表合并单元格

在 Vue 中实现表格列表合并单元格可以使用以下两种方式：

1. 使用表格插槽

在表格中使用 `scoped slot` 定义表格的每一列，然后在需要合并单元格的列中使用 `rowspan` 和 `colspan` 属性定义需要合并的单元格数量。

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in list" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td :rowspan="index % 2 === 0 ? 2 : 0" :colspan="index === 0 ? 2 : 0">{{ item.address }}</td>
      </tr>
    </tbody>
  </table>
</template>

2. 使用第三方插件

Vue 中有很多第三方插件可以实现表格列表合并单元格的功能，如 `vue-tables-2`、`vue-grid-table` 等。这些插件提供了丰富的 API 和配置选项，可以满足不同的需求。例如，在 `vue-tables-2` 中可以使用 `rowspan` 和 `colspan` 选项来定义需要合并的单元格数量。

<template>
  <v-client-table :data="list" :columns="columns" :options="options"></v-client-table>
</template>

<script>
  import { ClientTable } from 'vue-tables-2';

  export default {
    components: { ClientTable },
    data() {
      return {
        list: [
          { name: 'John', age: 25, address: 'New York' },
          { name: 'Alex', age: 30, address: 'Los Angeles' },
          { name: 'Bob', age: 28, address: 'Chicago' },
          { name: 'Mary', age: 35, address: 'Houston' },
        ],
        columns: ['name', 'age', 'address'],
        options: {
          rowspan: [0, 2],
          colspan: [2, 2],
        },
      };
    },
  };
</script>

以上是两种实现表格列表合并单元格的方式，选择哪种方式取决于具体需求和场景。