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

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

第一列跨行合并单元格

template

<s-tableref="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 = 1res.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-tableref="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 = 1startItem['age'].rowSpan1 = 1startItem['address'].rowSpan2 = 1res.records.forEach((item, index) => {let nextItem = res.records[index + 1] || {}if (item['name'] === nextItem['name']) {startItem['name'].rowSpan++} else {startItem['name'] = nextItemstartItem['name'].rowSpan = 1}if (item['age'] === nextItem['age']) {startItem['age'].rowSpan1++} else {startItem['age'] = nextItemstartItem['age'].rowSpan1 = 1}if (item['address'] === nextItem['address']) {startItem['address'].rowSpan2++} else {startItem['address'] = nextItemstartItem['address'].rowSpan2 = 1}})return res}).catch((error) => {console.log(error)}).finally(() => {//...})}

效果图

多行合并可参考

antd-vue table跨行合并单元格