ttk-app-core/src/apps/app-demo/table/thead-group/components/table.js

@ttk/recat enterprise develop framework

import React, { useState, useEffect, useCallback } from 'react'
import { Table } from 'antd'
import { useActions, useData, useCommit } from '@ttk/app-loader'

export default function Com(props) {
  const commit = useCommit()
  const actions = useActions(props)
  const tableData = useData([props, 'tableData']).toJS()
  let mergeObj = {
    name: {},
    province: {},
    city: {}
  }
  mergeObj = tableData.reduceRight(function(accumulate, item, index, array) {
    accumulate.name[`${index}`] = accumulate.name[`${index}`] || 1
    accumulate.province[`${index}`] = 1
    accumulate.city[`${index}`] = 1
    if (index > 0) {
      // 相邻行名称相同，合并行
      if (array[index].name == array[index - 1].name) {
        accumulate.name[`${index - 1}`] = accumulate.name[`${index}`] + 1
        accumulate.name[`${index}`] = 0
      }
    }

    // 省份和地市列相同，合并列
    if (item.province == item.city) {
      console.log(123, item, accumulate)
      accumulate.province[`${index}`] = 2
      accumulate.city[`${index}`] = 0
    }
    return accumulate
  }, mergeObj)
  
  useEffect(() => {
    actions.getTableData() // 获取数据
  })

  const columns = [
    {
      title: '名称',
      width: 100,
      dataIndex: 'name',
      render: (text, row, index) => {
        return {
          children: text,
          props: {
            rowSpan: mergeObj.name[index],
          },
        };
      }
    },
    {
      title: '年龄',
      width: 100,
      dataIndex: 'age',
      key: 'age',
    },{
      // 表头合并
      title: '地区', dataIndex: 'address', key: 'area-1',
      children: [
        { title: '国家省份', dataIndex: 'address', key: '1' },
        { title: '省份', dataIndex: 'province', key: '2',
          render: (text, row, index) => {
            return {
              children: text,
              props: {
                colSpan: mergeObj.province[index],
              },
            };
          }},
        { title: '地市', dataIndex: 'city', key: '3',
          render: (text, row, index) => {
            return {
              children: text,
              props: {
                colSpan: mergeObj.city[index],
              },
            };
          }},
      ]
    },
    {
      title: '操作',
      key: 'operation',
      width: 100,
      render: () => <a>编辑</a>,
    },
  ];

  return (
    <React.Fragment>
      <Table columns={columns} dataSource={tableData} bordered/>
    </React.Fragment>
  )
}