Vben Admin——vben admin Table实现合并行

效果：

代码：

<template>
  <Table
    :columns="columns"
    :data-source="list"
    bordered
    :scroll="{ y: '60vh', x: '90%' }"
    :defaultExpandAllRows="true"
    style="margin-bottom: 32px"
  />
</template>
<script lang="ts" setup name="">
import { Table } from "ant-design-vue";
import { ref, onMounted } from "vue";

const columns = [
  {
    dataIndex: "name",
    title: "名字",
    width: 120,
    customRender: ({ record }) => {
      return record.name;
    },
    customCell: (record, rowIndex, column) => {
      return {
        rowSpan: rowSpanArr.value[rowIndex],
        style: {
          "text-align": "center", // 单元格文本居中
          "vertical-align": "middle", // 单元格内容垂直居中
        },
      };
    },
  },
  {
    dataIndex: "age",
    title: "年龄",
    width: 120,
  },
];
const getRowspan = (dataScroce, filed) => {
  let spanArr = [];
  let position = 0;
  dataScroce.forEach((item, index) => {
    if (index === 0) {
      spanArr.push(1);
      position = 0;
    } else {
      if (dataScroce[index][filed] === dataScroce[index - 1][filed]) {
        spanArr[position] += 1;
        spanArr.push(0);
      } else {
        spanArr.push(1);
        position = index;
      }
    }
  });
  return spanArr;
};
const rowSpanArr = ref([]);
const list = ref([]);
onMounted(() => {
  getList();
});
const getList = async () => {
  list.value = [
    {
      name: "张三",
      age: 18,
    },
    {
      name: "李四",
      age: 20,
    },
  ];
  rowSpanArr.value = getRowspan(list?.value ?? [], "name");
};
</script>
<style lang="less" scoped></style>