---

合并效果

主要是使用官方文档上的 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-ignore
                  customRender: ({ text, record, index }) => {
                    const obj = {
                      children: text,
                      props: {} as any
                    }
                    // record 是当前行的数据
                    obj.props.rowSpan = record.rowSpan
                    return 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-ignore
      customRender: ({ text, record, index }) => {
        const obj = {
          children: text,
          props: {} as any
        }
        obj.props.rowSpan = record.rowSpan
        if (record.productName === '小计') {
          obj.props.colSpan = 3
        }
        if (text === '汇总') {
          obj.props.colSpan = 4
        }
        return obj
       }
     },
    {
      title: '门票名称',
      dataIndex: 'productName',
      key: 'productName',
      // @ts-ignore
      customRender: ({ text, record, index }) => {
        const obj = {
          children: text,
          props: {} as any
        }
        obj.props.rowSpan = record.rowSpan
        if (record.productName === '小计') {
          obj.props.colSpan = 3
        } else if (record.touristTypeName === '汇总') {
          obj.props.colSpan = 0
        }
        return obj
       }
     }