Ant Design

Table of Contents

antd v4 发布了,以下如无特殊说明,均为 3.x 版本。

1. FAQ

1.1. 表格内嵌表格,无数据时不显示 icon

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.2. 表格水平滚动条,显示时多了一个空白列

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

1.3. 表单 required 校验时,提示 "xxx is not string"

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

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

比如:

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

1.4. v4 form initialValue 只初始化一次

官方说明:

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

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

1.5. v3/v4 更改全局 Empty 组件样式

可以使用 ConfigProvider 全局修改组件配置,如下:

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

1.6. v4 使用 iconfont

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"/>

2. 资源

Footnotes:

First created: 2019-12-10 18:01:01
Last updated: 2021-11-15 Mon 10:18
Power by Emacs 27.2 (Org mode 9.4.6)