【已解决】Antd Pro中如何动态自定义生成带合并单元格的表头

import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  Card,
  Form,
  Table,
} from 'antd';
import { routerRedux } from 'dva/router';
import SimpleTable from 'components/SimpleTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from '../List/TableList.less';

const { Column, ColumnGroup } = Table;

// @connect(({ script, loading }) => ({
  @connect(({ script}) => ({
  script,
  // loading: loading.models.script,
}))
@Form.create()
export default class AllUserScriptCount extends PureComponent {
  state = {
    formValues: {},
    currentPage: 1,
    pageSize: 20,
  };

  componentDidMount() {
    this.props.dispatch({
        type: 'script/fetchUserScriptsCount',
      });
  }

  handleStandardTableChange = (pagination) => {
    const { dispatch } = this.props;
    const { formValues } = this.state;

    this.setState({
      currentPage: pagination.current,
      pageSize: pagination.pageSize,
    });

    const params = {
      page: pagination.current,
      page_size: pagination.pageSize,
      ...formValues,
    };

    dispatch({
      type: 'script/fetchUserScriptsCount',
      payload: params,
    });
  };

  handleScriptList = (searchPara) => {
    console.log("handleScriptList: searchPara=", searchPara)

    const { dispatch } = this.props;
    dispatch(routerRedux.push({
      pathname: '/script/all-script-list',
      // search: `?author_id=${authorId}`,
      search: searchPara,
    }));
  };


  // merge `rowCountToMerge` rows start from `startRowIdx`
  mergeRows = (value, row, index, rowCountToMerge, startRowIdx, searchPara) => {
    console.log(`value=${value}, index=${index}, rowCountToMerge=${rowCountToMerge},startRowIdx=${startRowIdx}, searchPara=${searchPara}`, "row=", row)

    const obj = {
      // children: value,
      children: <a href="javascript:;"  onClick={() => this.handleScriptList(searchPara)} >{value}</a>,
      props: {},
    }

    const endRowIdx = startRowIdx + (rowCountToMerge - 1)

    if (index === startRowIdx) {
      obj.props.rowSpan = rowCountToMerge
    } else if ((index >= (startRowIdx+1)) && (index <= endRowIdx)) {
      // other row are merged into first row cell
      obj.props.rowSpan = 0
    }

    console.log("obj=", obj)

    return obj
  }

  render() {
    const { script: { userScriptsCount }, loading } = this.props;
    const { currentPage, pageSize } = this.state;

    // const columns = [
    //   {
    //     title: '序号',
    //     dataIndex: 'no',
    //     rowKey: 'no',
    //     render(text, record, index) {
    //       const no = (currentPage - 1) * pageSize
    //       return no + index + 1;
    //     },
    //   },
    //   {
    //     title: '用户名',
    //     dataIndex: 'username',
    //     rowKey: 'username',
    //     render: (text, record) => (
    //       <Fragment>
    //         <a href="javascript:;" onClick={() => this.handleScriptList(record.user_id)}>{text}</a>
    //       </Fragment>
    //     ),
    //   },
    //   {
    //     title: '所有剧本',
    //     dataIndex: 'all_scripts_count',
    //     rowKey: 'all_scripts_count',
    //   },
    //   {
    //     title: '已发布剧本数量',
    //     dataIndex: 'published_scripts_count',
    //     rowKey: 'published_scripts_count',
    //   },
    //   {
    //     title: '通过率',
    //     dataIndex: 'published_ratio',
    //     rowKey: 'published_ratio',
    //   },
    // ];


    const columns = [
      {
        title: '序号',
        dataIndex: 'number',
        rowKey: 'number',
        // render(text, record, index) {
        //   const number = (currentPage - 1) * pageSize
        //   return number + index + 1;
        // },
      },
      {
        title: '剧本组',
        // dataIndex: 'scriptGroup',
        rowKey: 'scriptGroup',
        children: [
          {
            title: '组名',
            dataIndex: 'groupName',
            rowKey: 'groupName',
            render: (value, row, index) => {
              const searchPara = `?group_id=${row.groupId}`
              return this.mergeRows(value, row, index, 3, 0, searchPara)
              // console.log(`value=${value}, index=${index}, `, "row=", row)

              // const obj = {
              //   children: value,
              //   props: {},
              // }

              // if (index === 0) {
              //   obj.props.rowSpan = 3
              // } else if ((index === 1) || (index === 2)) {
              //   // These two row are merged into above cell
              //   obj.props.rowSpan = 0
              // }

              // console.log("obj=", obj)

              // return obj
            },
          },
          {
            title: '组长',
            dataIndex: 'groupOwner.username',
            rowKey: 'groupOwner.username',
            render: (value, row, index) => {
              const searchPara = `?user_id=${row.groupOwner.id}`
              return this.mergeRows(value, row, index, 3, 0, searchPara)
            },
          },
          {
            title: '剧本总数',
            dataIndex: 'totalScriptCount',
            rowKey: 'totalScriptCount',
            render: (value, row, index) => {
              const searchPara = `?group_id=${row.groupId}`
              return this.mergeRows(value, row, index, 3, 0, searchPara)
            },
          },
        ],
      },
      {
        title: '组员',
        rowKey: 'membersInfo',
        dataIndex: 'membersInfo',
        children: [
          {
            title: '用户名',
            dataIndex: 'membersInfo.username',
            rowKey: 'membersInfo.username',
          },
          {
            title: '剧本总数',
            dataIndex: 'membersInfo.totalScriptCount',
            rowKey: 'membersInfo.totalScriptCount',
          },
          {
            title: '已通过',
            dataIndex: 'membersInfo.publishedScriptCount',
            rowKey: 'membersInfo.publishedScriptCount',
          },
          {
            title: '未通过',
            dataIndex: 'membersInfo.nonPublishedScriptCount',
            rowKey: 'membersInfo.nonPublishedScriptCount',
          },
          {
            title: '通过率',
            dataIndex: 'membersInfo.publishedScriptRatio',
            rowKey: 'membersInfo.publishedScriptRatio',
          },
          {
            title: '未通过率',
            dataIndex: 'membersInfo.nonPublishedScriptRatio',
            rowKey: 'membersInfo.nonPublishedScriptRatio',
          },
        ],
      },
    ]

    const data = [
      {
        key: '1',
        number: 1,
        groupId: "5",
        groupName: 'Maggie剧本组',
        groupOwner: {
          "id": "78c7b3c48a7c4f1f96cedc469fedad40",
          "username": 'Maggie',
        },
        totalScriptCount: 248,
        membersInfo : {
          'username': 'Maggie',
          'totalScriptCount': 121,
          'publishedScriptCount': 121,
          'publishedScriptRatio': '100%',
          "nonPublishedScriptCount": 0,
          'nonPublishedScriptRatio': '0%',
        },
      },
      {
        key: '2',
        number: 2,
        groupId: "5",
        groupName: 'Maggie剧本组',
        groupOwner: {
          "id": "78c7b3c48a7c4f1f96cedc469fedad40",
          "username": 'Maggie',
        },
        totalScriptCount: 248,
        membersInfo : {
          'username': 'xxx',
          'totalScriptCount': 101,
          'publishedScriptCount': 101,
          'publishedScriptRatio': '100%',
          "nonPublishedScriptCount": 0,
          'nonPublishedScriptRatio': '0%',
        },
      },
      {
        key: '3',
        number: 3,
        groupId: "5",
        groupName: 'Maggie剧本组',
        groupOwner: {
          "id": "78c7b3c48a7c4f1f96cedc469fedad40",
          "username": 'Maggie',
        },
        totalScriptCount: 248,
        membersInfo : {
          'username': 'xxx',
          'totalScriptCount': 26,
          'publishedScriptCount': 26,
          'publishedScriptRatio': '0%',
          "nonPublishedScriptCount": 0,
          'nonPublishedScriptRatio': '100%',
        },
      },
    ];

    return (
      <PageHeaderLayout title="全部用户剧本统计">
        <Card bordered={false}>
          <div className={styles.tableList}>
            {/* <SimpleTable
              loading={loading}
              data={userScriptsCount}
              columns={columns}
            /> */}

            <Table
              bordered
              columns={columns}
              dataSource={data}
            >
              {/* <Column
                title="序号"
                dataIndex="number"
                key="number"
              />
              <ColumnGroup title="剧本组">
                <Column
                  title="组名"
                  dataIndex="groupName"
                  key="groupName"
                />
                <Column
                  title="组长"
                  dataIndex="groupOwnerName"
                  key="groupOwnerName"
                />
                <Column
                  title="剧本总数"
                  dataIndex="totalScriptCount"
                  key="totalScriptCount"
                />
              </ColumnGroup>
              <Column
                title="Age"
                dataIndex="age"
                key="age"
              />
              <Column
                title="Address"
                dataIndex="address"
                key="address"
              /> */}
            </Table>

          </div>
        </Card>
      </PageHeaderLayout>
    );
  }
}

转载请注明：在路上 » 【已解决】Antd Pro中如何动态自定义生成带合并单元格的表头