table表格实现多行合并效果实现

vue-ant table表格实现多行合并

效果如图：

<template>
	<a-table
      :columns="columns"
      :data-source="data"
      bordered
      size="middle"
      :scroll="{ x: 'calc(200px + 50%)' }"
      :pagination="false"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'action'">
          <span @click="toProjectPage(record.id)" style="color: #1677ff; cursor: pointer">
            查看详情
          </span>
        </template>
      </template>
    </a-table>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { h } from 'vue';


const columns = ref([]);
const data = ref([]); 
const totals = ref({});
const list = ref<any>([]);

onMounted(async () => {
  getDataDetail();
});

const toProjectPage = params => {
};

/** 获取数据明细列表数据 */
const getDataDetail = async () => {
  let columnsRes: any = [
    {
      title: '时间',
      dataIndex: 'name',
      align: 'center',
      width: 120,
      customCell: (_, index) => {
        if (index === 0) {
          return { rowSpan: 9 }; // 当前单元格与上一行的单元格合并，不再渲染
        } else {
          return { rowSpan: 0 };
        }
      },
    },
    {
      title: '二列',
      dataIndex: 'app_id',
      align: 'center',
      width: 120,
    },
    {
      title: '三列',
      dataIndex: 'state_id',
      align: 'center',
      width: 120,
    },
    {
      title: '四列',
      dataIndex: 'model_name',
      align: 'center',
      width: 120,
    },
    {
      title: '五列',
      dataIndex: 'person',
      align: 'center',
      width: 120,
    },
    {
      title: '六列',
      dataIndex: 'cost_sum',
      align: 'center',
      width: 120,
    },
    {
      title: '七列',
      dataIndex: 'invoke_sum',
      align: 'center',
      width: 120,
    },
    {
      title: '八列',
      dataIndex: 'external_sum',
      align: 'center',
      width: 120,
    },
    {
      title: '操作',
      dataIndex: 'action',
      align: 'center',
      width: 120,
    },
  ];
  let totalsArr: any = {};
  let dataRes: any = [
    {
      name: 'XXX1',
      app_id: 111,
      state_id: 11111,
      model_name: '3333',
      person: '9999',
      cost_sum: 1867,
      invoke_sum: 98989,
      external_sum: 9877,
    },
    {
      name: 'XXX2',
      app_id: 111,
      state_id: 11111,
      model_name: '3333',
      person: '9999',
      cost_sum: 1867,
      invoke_sum: 98989,
      external_sum: 9877,
    },
    {
      name: 'XXX3',
      app_id: 111,
      state_id: 11111,
      model_name: '3333',
      person: '9999',
      cost_sum: 1867,
      invoke_sum: 98989,
      external_sum: 9877,
    },
    {
      name: 'XXX5',
      app_id: 111,
      state_id: 11111,
      model_name: '3333',
      person: '9999',
      cost_sum: 1867,
      invoke_sum: 98989,
      external_sum: 9877,
    },
    {
      name: 'XXX6',
      app_id: 111,
      state_id: 11111,
      model_name: '3333',
      person: '9999',
      cost_sum: 1867,
      invoke_sum: 98989,
      external_sum: 9877,
    },
  ];
  columns.value = columnsRes;
  data.value = dataRes;
  totals.value = totalsArr;
  list.value = columnsRes.slice(1);
};
</script>

<style scoped lang="less">
:deep(.ant-table-thead > tr > th) {
  color: #fff !important;
  background: #1677ff !important;
  border-radius: 0 !important;
  text-align: center !important;
}
:deep(.ant-table-tbody > tr > td) {
  text-align: center !important;
}

.tabel-area {
  padding: 10px 20px 0;
  .filter-area {
    display: flex;
    align-items: center;
    .search-btn {
      margin-left: 20px;
    }
  }
  :deep(.ant-table-column-sorter-inner) {
    color: #fff !important;
  }
  :deep(.ant-table-thead) > tr > th {
    color: #fff !important;
    background: #1677ff !important;
    border-radius: 0 !important;
    text-align: center !important;
  }
  :deep(.ant-table-tbody) > tr > td,
  .ant-table-wrapper .ant-table-summary > tr > td {
    text-align: center !important;
  }
  .ant-table-wrapper .ant-table-summary > tr > td {
    background-color: #e7f5ff;
    font-weight: bolder;
  }
}
</style>