记录项目开发过程中遇到的一些问题(antd 4.x)
官网镜像地址
https://ant-design.gitee.io/index-cn (来自issues 25661)
default.less
https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
Form
根据某个表单项的值渲染其他表单项
shouldUpdate: boolean | (prevValue, curValue) => boolean
1 | <Form.Item noStyle shouldUpdate> |
一个表单项中有多个控件
提交失败时自动滚动到指定字段
自定义表单控件 scrollToFirstError 和 scrollToField 失效?
- scrollToFirstError
提交失败自动滚动到第一个错误字段。
注意:必须使用表单submit提交才会触发。
- scrollToField
如果不使用表单submit提交,使用scrollToField滚动到对应字段位置:
1 | scrollToField(name: NamePath, options: ScrollOptions) |
1 | const submit = async () => { |
嵌套结构校验
校验嵌套数据结构中的某几个项:
1 | <FormItem name={['app', 'name' ]}> |
1 | // 只校验app.name |
Form.List的局部校验
https://juejin.cn/post/6844904176770613261
1 | // 单行验证, index代表的是第几行数据 |
关闭Modal销毁form中的数据
4.5.0之后,可以给Form
加上preserve={false}
属性来清除跟随Modal
销毁的字段数据:https://codesandbox.io/s/mystifying-sound-lkin8
Select
如果发现下拉菜单跟随页面滚动,或者需要在其他弹层中触发 Select,请尝试使用
getPopupContainer={triggerNode => triggerNode.parentElement}
将下拉弹层渲染节点固定在触发器的父元素中。
自定义回填内容
optionLabelProp="name"
:
1 | <Select optionLabelProp="name"> |
自定义搜索筛选filterOption
利用option.key
与option.title
1 | <Select showSearch filterOption={(input, option) => { |
滚动加载
onPopupScroll
: 下拉列表滚动时的回调
1 | const handlePopupScroll = (e) => { |
Tree
虚拟滚动
默认virtual: true
开启虚拟滚动,通过添加height
属性激活。如果需要支持横向滚动,应该关闭虚拟滚动,因为虚拟滚动不会渲染所有节点,无法自动拓转横向宽度(虚拟滚动的限制)。
onSelect获取key
1 | const onSelect = (selectedKeys, e) => { |
Affix
页面顶部导航栏用<Affix offsetTop={0}>
包裹,滚动时会抖动。
解决方法:<Affix offsetTop={0.1}>
Drawer
监听滚动事件
Drawer滚动事件在ant-drawer-body
节点上,可以通过修改css,转移滚动对象,使ant-drawer-body
不滚动。
Modal
网页全屏下Modal不显示问题
使用getContainer
:
1 | <Modal |
Table
超过宽度省略
暂不支持和排序筛选一起使用。
设置为 true 或 { showTitle?: boolean } 时,表格布局将变成 tableLayout=”fixed”
1 | columns = [ |
flex布局下Table宽度溢出问题
https://github.com/ant-design/ant-design/issues/28158#issuecomment-737648133
设置flex元素:
1 | .flex { |
Upload
beforeUpload
阻止不符合要求的文件上传return Upload.LIST_IGNORE
:
1 | function beforeUpload(file) { |