Ant Design

function expandIcon({ expanded, expandable, record, onExpand }) {
    if (!expandable || record.canExpanded === false) return null;

    return (
            <a onClick={e => onExpand(record, e)}>
            {expanded ? <Icon type="minus-square" /> : <Icon type="plus-square" />}
        </a>
    );
}

https://codesandbox.io/s/8x2j898pp2

1. 列设置固定宽度，比如 width: 980 ，注意是数值不是字符串
2. 设置 scroll，比如 scroll={{ x: 1600 }} x 的值对应的屏幕的大小，1600 的意思是超过 1600 宽度的屏幕才开始滚动。 另外 x 可以设置成 max-content 来自适应滚动¹。

如果设置了 required: true ，会校验值是否有效，但是默认似乎是 string 类型，如果值不是 string 类型，需要手动设置值类型 type 。

type 可选值有：https://github.com/yiminghe/async-validator#type

比如：

rules: [{ require: true, type: 'integer' }]

官方说明：

在 v3 版本中，修改未操作的字段 initialValue 会同步更新字段值，这是一个 BUG。但是由于被长期作为一个 feature 使用， 因而我们一直没有修复。在 v4 中，该 BUG 已被修复。initialValue 只有在初始化以及重置表单时生效。

这会导致类似编辑的表单老的办法没法使用了，表单字段只能初始化一次，数据不更新。解决办法：

• form.setFieldsValue 设置值 https://codepen.io/afc163-1472555193/pen/LYVjNWN?editors=0011

可以使用 ConfigProvider 全局修改组件配置，如下：

const customizeRenderEmpty = () => <div style={{ textAlign: 'center' }}>暂无数据</div>
<ConfigProvider renderEmpty={customizeRenderEmpty} />

antd@v4 icon 支持 iconfont.cn 的扩展。方式如下：

import { createFromIconfontCN } from '@ant-design/icons';

const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});

ReactDOM.render(
  <div className="icons-list">
    <IconFont type="icon-tuichu" />
    <IconFont type="icon-facebook" />
    <IconFont type="icon-twitter" />
  </div>,
  mountNode,
);

遇到的第一个问题： //at.alicdn.com/t/font_8d5l8fzk5b87iudi.js 是怎么生成的？这是在 iconfont.cn 网站上进行操作的：

1. 登录 -> 资源管理 -> 我的项目 -> 新建项目（加号）。
2. 搜索到需要使用的 icon -> 选择购买（购物框的按钮）
3. 点击右上角购物车 -> 点击添加到项目
4. 资源管理 -> 我的项目 -> 我发起的项目 然后就可以看到 Unicode/Font class/Symbol 三种使用方法对应的地址。

antd 官网提供的方法是使用 Symbol 的方式（也是推荐的方式）。

但是我们公司的框架中对 cdn 引用进行了特殊的处理，导致按照 Symbol 来引入会跨域的问题。所以只能使用 css 的方式:

1. 在全局 less 文件中引入 @import "//at.alicdn.com/t/font_2505499_6jppz07ad8.css";
2. 代码中直接使用 <i className="iconfont icondocker"/>