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>