react 项目 antd 使用备忘录

持续更新中.....

antd 表格的标头和单元格的自定义

// 例如：
import { ProColumns } from '@ant-design/pro-table'
import { QuestionCircleOutlined } from '@ant-design/icons'

const columns: ProColumns[] = [
    {
      title: () => (
        <span className="tableTipsBox">
          订单数
          <Tooltip title="已支付的订单数，包括已退款的" color="#fff" overlayClassName="tableTips">
            <QuestionCircleOutlined />
          </Tooltip>
        </span>
      ),
      key: 'orderNum',
      dataIndex: 'orderNum',
      ellipsis: true,
      hideInSearch: true,
      width: 130,
      onCell: (record) => {
        return {
          className: record.orderNum > 0 ? 'active' : '', // 添加类名
          onClick: () => { // 添加点击事件
            history.push({
              pathname: '/activity/order/orderList',
              query: {
                activityName: record.activityName,
                orderStatus: 2 // 已付款
              }
            })
          }
        }
      }
    },
]

antd table的表头为动态数据

如下效果图：

// 例如：
  const testData = [
    {
      employeeName: '张三',
      roasterList: [
        {
          roasterTime: '11月1日',
          roasterStatus: '班'
        },
        {
          roasterTime: '11月2日',
          roasterStatus: '班'
        }
      ]
    }
  ]

  const columns: ProColumns[] = [
    {
      title: '员工',
      key: 'employeeName',
      dataIndex: 'employeeName',
      width: 150,
      ellipsis: true
    }
  ]
  testData[0].roasterList.forEach((item, index) => {
    columns.push({
      title: item.roasterTime,
      dataIndex: ['roasterList', `${index}`, 'roasterStatus'],
      width: 120,
      hideInSearch: true
    })
  })
  
  <ProTable
      columns={columns}
      request={() => {
        return Promise.resolve({
          data: testData,
          success: true
        })
      }}
      headerTitle='客服排班表'
      bordered
    />

给表格 title 添加 tooltip 提示效果，效果如下：

关键代码是给需要添加提示的表头title属性用函数的方式渲染出tooltip。

// 示例代码：
import { Button, Tooltip } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'

const columns: ProColumns[] = [
	{
      title: '销售业绩/元',
      key: 'salesPerformance',
      dataIndex: 'salesPerformance',
      ellipsis: true,
      hideInSearch: true,
      width: 180
    }, {
      title: () => (
        <span className='incomeBox'>
          收益/元
          <Tooltip title='商品佣金、邀请奖励的总和' color='#fff' defaultVisible overlayClassName='incomeTips'>
            <QuestionCircleOutlined />
          </Tooltip>
        </span>
      ),
      key: 'income',
      dataIndex: 'income',
      ellipsis: true,
      hideInSearch: true,
      width: 180
    }, {
      title: '客户数',
      key: 'customerNumber',
      dataIndex: 'customerNumber',
      ellipsis: true,
      hideInSearch: true,
      width: 130
    }
  ]

Tree结构遍历（需求：根据自己的结构布局）

import { Tree } from 'antd'

const treeData = [
  {
    title: '0-0',
    key: '0-0',
    children: [
      {
        title: '0-0-0',
        key: '0-0-0',
        children: [
          { title: '0-0-0-0', key: '0-0-0-0' },
          { title: '0-0-0-1', key: '0-0-0-1' },
          { title: '0-0-0-2', key: '0-0-0-2' },
        ],
      },
      {
        title: '0-0-1',
        key: '0-0-1',
        children: [
          { title: '0-0-1-0', key: '0-0-1-0' },
          { title: '0-0-1-1', key: '0-0-1-1' },
          { title: '0-0-1-2', key: '0-0-1-2' },
        ],
      },
      {
        title: '0-0-2',
        key: '0-0-2',
      },
    ],
  },
  {
    title: '0-1',
    key: '0-1',
    children: [
      { title: '0-1-0-0', key: '0-1-0-0' },
      { title: '0-1-0-1', key: '0-1-0-1' },
      { title: '0-1-0-2', key: '0-1-0-2' },
    ],
  },
  {
    title: '0-2',
    key: '0-2',
  },
];

// 构建自己的树形菜单
  const renderTree = (data) => {
    return data.map(item => {
      if (item.children && item.children.length > 0) {
        return (
          <Tree.TreeNode {...item} checkable title={item.title} key={item.key}>
            {renderTree(item.children)}
          </Tree.TreeNode>
        )
      }
      return (
        <Tree.TreeNode
          {...item}
          checkable
          className="lastChild"
          title={item.title}
          key={item.key}
        />
      )
    })
  }
  
  render () {
  	return (
    		<Tree checkable defaultExpandAll onCheck={onCheckTree} checkedKeys={checkedKeys}>
          		{renderTree(treeData)}
        	</Tree>
    )
  }