基于a-table的横向表头合并和纵向表头合并

（一）需求：需要实现纵向和横向的标题合并

（二）方案

     使用antd的a-table组件，分别对data和column进行操作，使用api文档里的合并属性。

（1）横向表头合并/包含：使用columns[n] 内嵌 children

const columns = ref([
    { title: '一级表头1', dataIndex: 'value0', key: 'key', align: 'center', width: 50 },
    {
        title: '一级表头2',
        align: 'center',
        children: [
            { title: '二级表头1', dataIndex: 'value1', key: 'key', align: 'center', width: 50 },
            { title: '二级表头2', dataIndex: 'value2', key: 'key', align: 'center', width: 50 },
            { title: '二级表头3', dataIndex: 'value3', key: 'key', align: 'center', width: 50 },
        ]
    }
])

（2）纵向标题合并：在column中设置对应列下rowSpan的值

const columns = ref([
		{
			title: '用电分类',
			dataIndex: 'firstName',
			key: 'key',
			align: 'center',
			colSpan: 2,
			customCell: (row, index) => {
				if (row.firstName === '工商业用电') {
					return { rowSpan: 6 }
				}
				return { rowSpan: 0 }
			},
			width: 50
		},
		{
			title: '用电分类',
			dataIndex: 'classify',
			key: 'key',
			align: 'center',
			colSpan: 2,
			width: 50,
			customCell: (row, index) => {
				if (row.classify == '单一制') {
					return { rowSpan: 3 }
				}
				if (row.classify == '两部制') {
					return { rowSpan: 4 }
				}
				return { rowSpan: 0 }
			}
		}
])
const data = ref([
		{
			firstName: '工商业用电',
			classify: '单一制',
			voltage: '不满1千伏',
			value: 32,
			key: 1
		},
		{ firstName: '', classify: '', voltage: '1-10千伏', value: -1, key: 2 },
		{ firstName: '', classify: '', voltage: '35千伏', value: 32, key: 3 },
		{
			firstName: '',
			classify: '两部制',
			voltage: '不满1千伏',
			value: 32,
			key: 4
		},
		{ firstName: '', classify: '', voltage: '1-10千伏', value: 42, key: 5 },
		{ firstName: '', classify: '', voltage: '35千伏', value: 32, key: 6 }
	])

完整代码：

<template>
    <a-table
		class="table-style"
		style="margin-top: 10px"
		:columns="columns"
		:dataSource="data"
		bordered
		:pagination="false"
		tableLayout="auto"
		size="small"
	/>
</template>
<script setup name="jsonTable">

const columns = ref([
		{
			title: '用电分类',
			dataIndex: 'firstName',
			key: 'key',
			align: 'center',
			colSpan: 2,
			customCell: (row, index) => {
				if (row.firstName === '工商业用电') {
					return { rowSpan: 6 }
				}
				return { rowSpan: 0 }
			},
			width: 50
		},
		{
			title: '',
			dataIndex: 'classify',
			key: 'key',
			align: 'center',
			colSpan: 0,
			customCell: (row, index) => {
				if (row.classify === '单一制') {
					return { rowSpan: 3 }
				}
				if (row.classify === '两部制') {
					return { rowSpan: 3 }
				}
				return { rowSpan: 0 }
			},
			width: 50
		},
		{ title: '电压等级', dataIndex: 'voltage', key: 'key', align: 'center', width: 50 },
		{ title: '电度用电价格', dataIndex: 'value', key: 'key', align: 'center', width: 50 },
		{
			title: '其他',
			align: 'center',
			children: [
				{ title: '代理购电价格', dataIndex: 'value', key: 'key', align: 'center', width: 50 },
				{ title: '上网环节折损', dataIndex: 'value', key: 'key', align: 'center', width: 50 },
				{ title: '电度输配电价', dataIndex: 'value', key: 'key', align: 'center', width: 50 },
				{ title: '系统运行费用折价', dataIndex: 'value', key: 'key', align: 'center', width: 50 },
				{ title: '政府性基金及附加', dataIndex: 'value', key: 'key', align: 'center', width: 50 }
			]
		},
		{
			title: '分时用电价格',
			align: 'center',
			children: [
				{ title: '尖峰时段', dataIndex: 'value', key: 'key', align: 'center', width: 50 },
				{ title: '高峰时段', dataIndex: 'value', key: 'key', align: 'center', width: 50 },
				{ title: '平时段', dataIndex: 'value', key: 'key', align: 'center', width: 50 },
				{ title: '低谷时段', dataIndex: 'value', key: 'key', align: 'center', width: 50 }
			]
		},
		{
			title: '容(需)量用电价格',
			align: 'center',
			children: [
				{ title: '最大需量', dataIndex: 'value', key: 'key', align: 'center', width: 50 },
				{ title: '变压器容', dataIndex: 'value', key: 'key', align: 'center', width: 50 }
			]
		}
	])

const data = ref([
		{
			firstName: '工商业用电',
			classify: '单一制',
			voltage: '不满1千伏',
			value: 32,
			key: 1
		},
		{ firstName: '', classify: '', voltage: '1-10千伏', value: -1, key: 2 },
		{ firstName: '', classify: '', voltage: '35千伏', value: 32, key: 3 },
		{
			firstName: '',
			classify: '两部制',
			voltage: '不满1千伏',
			value: 32,
			key: 4
		},
		{ firstName: '', classify: '', voltage: '1-10千伏', value: 42, key: 5 },
		{ firstName: '', classify: '', voltage: '35千伏', value: 32, key: 6 }
	])

</script>