发稿是什么意思_今日全国各省疫情最新消息数据_关键词seo排名怎么做的_查询关键词网站

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

效果如图：

<template><a-table:columns="columns":data-source="data"borderedsize="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>