【antd + vue】表格行合并，同时使用插槽

在使用Ant Design Vue的Table组件时，如果需要行合并，可以使用span-method属性来实现。以下是一个使用插槽实现行合并的示例代码：

<template>
  <a-table
    :columns="columns"
    :dataSource="data"
    :pagination="false"
    :bordered="true"
    :span-method="mergeRows"
  >
    <!-- 插槽使用 -->
    <template slot="name" slot-scope="text">
      {{ text.firstName }} {{ text.lastName }}
    </template>
  </a-table>
</template>
 
<script>
export default {
  data() {
    return {
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          width: 200,
          scopedSlots: { customRender: 'name' }
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
          width: 200
        },
        // 其他列数据...
      ],
      data: [
        {
          key: '1',
          name: { firstName: 'John', lastName: 'Doe' },
          age: 32,
          // 其他数据...
        },
        // 其他行数据...
      ],
    };
  },
  methods: {
    mergeRows({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
};
</script>

在这个例子中，mergeRows方法决定了第一列（Name列）中哪些行需要合并，以及合并的行数。这里假设我们想要每两行合并一次。插槽部分用于自定义Name列的显示方式，例如这里将firstName和lastName结合显示。