多种情况下合并单元格(S-Table+Vue3)

合并单元格(S-Table+Vue3)

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan="“合并单元格的个数”

第一列跨行合并单元格

template

<s-table
	ref="table"
	bordered
	:columns="columns"
	:data="loadData"
	:row-key="(record) => record.id"
	:scroll="{ x: 1500 }"
	:tool-config="toolConfig"
>
</s-table>

script

//初始化
	const columns = [
		{
			title: '姓名',
			dataIndex: 'name',
			key: 'name',
			customCell: (data) => {
				return { rowSpan: data.rowSpan || 0 }
			}
		},
		{
			title: '年龄',
			dataIndex: 'age',
			key: 'age'
		},
		{
			title: '住址',
			dataIndex: 'address',
			key: 'address'
		}
	]

const loadData = (parameter) => {
	return 方法.then((res) => {
		//设置假数据，如有可不设置
		res.records = [
					{
						key: 1,
						name: 'coisini',
						age: 24,
						address: '0510volleyball'
					},
					{
						key: 2,
						name: 'coisini',
						age: 245,
						address: '0510volleyballw'
					},
					{
						key: 3,
						name: '胡彦斌',
						age: 32,
						address: '西湖区湖底公园1号'
					},
					{
						key: 5,
						name: '胡彦斌',
						age: 32,
						address: '西湖区湖底公园1号'
					},
					{
						key: 4,
						name: '胡彦祖',
						age: 42,
						address: '西湖区湖底公园1号'
					},
					{
						key: 6,
						name: '胡彦祖',
						age: 42,
						address: '西湖区湖底公园1号'
					}
				]
				
		let startItem = res.records[0];
  		startItem.rowSpan = 1
  		res.records.forEach((item, index) => {
  			let nextItem = res.records[index + 1] || {};
			if (item['orgName'] === nextItem['orgName']) {
			   startItem.rowSpan++;
			} else {
			   startItem = nextItem;
			   startItem.rowSpan = 1;
			 }
		})
		return res
	})
	.catch((error) => {
		console.log(error)
	})
	.finally(() => {
		//...
	})
}

效果

多列跨行合并单元格

template

<s-table
	ref="table"
	bordered
	:columns="columns"
	:data="loadData"
	:row-key="(record) => record.id"
	:scroll="{ x: 1500 }"
	:tool-config="toolConfig"
>
</s-table>

script

	const columns = [
		{
			title: '姓名',
			dataIndex: 'name',
			key: 'name',
			customCell: (data) => {
				console.log(data, 'data')
				return { rowSpan: data.rowSpan || 0 }
			}
		},
		{
			title: '年龄',
			dataIndex: 'age',
			key: 'age',
			customCell: (data) => {
				console.log(data, 'data1')
				return { rowSpan: data.rowSpan1 || 0 }
			}
		},
		{
			title: '住址',
			dataIndex: 'address',
			key: 'address',
			customCell: (data) => {
				console.log(data, 'data2')
				return { rowSpan: data.rowSpan2 || 0 }
			}
		}
	]
	//loadData
const loadData = (parameter) => {
	return 方法.then((res) => {
		//设置假数据，如有可不设置
		res.records = [
					{
						key: 1,
						name: 'coisini',
						age: 24,
						address: '0510volleyball'
					},
					{
						key: 2,
						name: 'coisini',
						age: 245,
						address: '0510volleyballw'
					},
					{
						key: 3,
						name: '胡彦斌',
						age: 32,
						address: '西湖区湖底公园1号'
					},
					{
						key: 5,
						name: '胡彦斌',
						age: 321,
						address: '西湖区湖底公园1号'
					},
					{
						key: 4,
						name: '胡彦祖',
						age: 42,
						address: '西湖区湖底公园1号1'
					},
					{
						key: 6,
						name: '胡彦祖2',
						age: 42,
						address: '西湖区湖底公园1号'
					}
				]
				let startItem = []
				startItem['name'] = res.records[0]
				startItem['age'] = res.records[0]
				startItem['address'] = res.records[0]
				startItem['name'].rowSpan = 1
				startItem['age'].rowSpan1 = 1
				startItem['address'].rowSpan2 = 1
				res.records.forEach((item, index) => {
					let nextItem = res.records[index + 1] || {}
					if (item['name'] === nextItem['name']) {
						startItem['name'].rowSpan++
					} else {
						startItem['name'] = nextItem
						startItem['name'].rowSpan = 1
					}
					if (item['age'] === nextItem['age']) {
						startItem['age'].rowSpan1++
					} else {
						startItem['age'] = nextItem
						startItem['age'].rowSpan1 = 1
					}
					if (item['address'] === nextItem['address']) {
						startItem['address'].rowSpan2++
					} else {
						startItem['address'] = nextItem
						startItem['address'].rowSpan2 = 1
					}
				})
			return res
			})
			.catch((error) => {
				console.log(error)
			})
			.finally(() => {
				//...
			})
	}

效果图

多行合并可参考

antd-vue table跨行合并单元格