合并单元格

合并效果

主要是使用官方文档上的 customRender 函数

表格的数据是打平后的数组结构

ant design vue 官方文档上面有详细的介绍，当前我使用的版本是 2.2.8，支持 vue3

ant design vue

实现效果效果如下

一、合并行

合并列核心代码

setRowSpan 方法是为了对比 重复项 给重复的设置合并行数

注意： 后台返回的数据结构 必须是一类都紧凑的在一起的

data 是表格数据field 是判断的字段（要合并的字段）const setRowSpan = (data: any[], field: string) => {let count = 0 // 开始的第一项let indexCount = 1 // 对比的另外一项while (indexCount < data.length) {const item = data[count]// 初始化赋值if (!item.rowSpan) {item.rowSpan = 1}// 判断当前项 和 后一项 的这个字段是否一致 一致则 合并的行数 +1 // 给对比的 后面的这一项的 这个单元格设置为 0 if (item[field] === data[indexCount][field]) {item.rowSpan++data[indexCount].rowSpan = 0} else {// 那说明 不相同 重新来过count = indexCount}// 对比完后 进入下一项indexCount++}}// 只需要关注 最里面那层的 customRender 函数const columns = ref<any>([{title: '收银日报表',children: [{title: childrenTitle.value,children: [{title: '游客类型',dataIndex: 'touristTypeName',key: 'touristTypeName',// @ts-ignorecustomRender: ({text, record, index }) => {const obj = {children: text,props: {} as any}// record 是当前行的数据obj.props.rowSpan = record.rowSpanreturn obj}}]}]}])

二、合并列

只需要 加上 obj.props.colSpan = 3因为这个合并列数 是死的 只会合并那么多 表格的格式是固定的if (record.productName === '小计') {obj.props.colSpan = 3}if (text === '汇总') {obj.props.colSpan = 4}

合并列注意点

合并之后 被他合并后的 那一列应该是没有dom 节点的 ，所以要

obj.props.colSpan = 0

// 注意点{title: '游客类型',dataIndex: 'touristTypeName',key: 'touristTypeName',// @ts-ignorecustomRender: ({text, record, index }) => {const obj = {children: text,props: {} as any}obj.props.rowSpan = record.rowSpanif (record.productName === '小计') {obj.props.colSpan = 3}if (text === '汇总') {obj.props.colSpan = 4}return obj}},{title: '门票名称',dataIndex: 'productName',key: 'productName',// @ts-ignorecustomRender: ({text, record, index }) => {const obj = {children: text,props: {} as any}obj.props.rowSpan = record.rowSpanif (record.productName === '小计') {obj.props.colSpan = 3} else if (record.touristTypeName === '汇总') {obj.props.colSpan = 0}return obj}}