最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

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

自定义 crifan 1576浏览 0评论
折腾:
【未解决】剧本编写系统中优化超级管理员的全部剧本统计页
期间,现有的效果是:
需要实现类似于:
的效果,其中表头和中间的单元格,都存在合并单元格的效果
去搞清楚antd pro中如何实现
去看官网文档:
Table表格 Ant Design – A UI Design Language
【总结】
目前,可以用如下代码实现带表头的效果的表格了:
src/routes/Admin/AllUserScriptCount.js
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中如何动态自定义生成带合并单元格的表头

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
80 queries in 0.164 seconds, using 22.22MB memory