antd Pro组件ProFormList自定义action
ProFormList是ant design pro的结构化数据组件,通常用来实现动态表单。
现在有个需求,除了组件自带的删除和复制,还需要增加两个按钮来实现每个item位置的上下移动,如图所示:
查看官方文档,组件有提供自定义action的API–actionRender,介绍如下
/**
* @name 自定义操作按钮
*
* @example 删除按钮
* actionRender:(field,action)=><a onClick={()=>action.remove(field.name)}>删除</a>
* @example 最多只能新增三行
* actionRender:(f,action,_,count)=><a onClick={()=>
* count>2?alert("最多三行!"):action.add({id:"xx"})}>删除
* </a>
*/
actionRender?: (
field: FormListFieldData,
/**
* 操作能力
* @example action.add(data) 新增一行
* @example action.remove(index) 删除一行
* @example action.move(formIndex,targetIndex) 移动一行
*/
action: FormListOperation,
/**
* 默认的操作dom
* [复制,删除]
*/
defaultActionDom: ReactNode[],
/**
* 当前共有几个列表项
*/
count: number,
) => ReactNode[];
API提供的参数–action提供了移动位置的方法action.move(formIndex,targetIndex),只需要传入当前位置索引和目标位置索引即可。
那现在的问题就是如何知道当前操作的item索引位置呢,官方文档写的不是很详细。研究了一会,奥秘竟在field参数中!
打印一下三个item的field
{
"name": 0,
"key": 0,
"isListField": true,
"fieldKey": 0,
"uuid": "fbf3b67a-345b-4645-ad0e-5bef325a8c39"
}
{
"name": 1,
"key": 1,
"isListField": true,
"fieldKey": 1,
"uuid": "2f8a7f5a-34f2-456e-8816-6ab0b6e72332"
}
{
"name": 2,
"key": 2,
"isListField": true,
"fieldKey": 2,
"uuid": "926653b6-df29-447a-bd40-a16a178e251a"
}
尝试执行move(0,1)后,再次打印对比uuid发现,name的值正是list索引,且随数组动态变化的,那就好办了,你早说嘛真是的。
于是答案呼之欲出:
actionRender={(field, action, defaultActionDom, count) => {
return [
...defaultActionDom,
<ArrowUpOutlined
key="up_arrow"
style={{ marginLeft: '5px' }}
onClick={() => {
if (field.name === 0) {
//位于第一个,移动到最后一个
action.move(field.name, count - 1);
} else {
action.move(field.name, field.name - 1);
}
}}
/>,
<ArrowDownOutlined
key="down_arrow"
style={{ marginLeft: '5px' }}
onClick={() => {
if (field.name === count - 1) {
//位于最后一个,移动到第一个
action.move(field.name, 0);
} else {
action.move(field.name, field.name + 1);
}
}}
/>,
];
}}
defaultActionDom直接挪过来,增加判断:当item位于第一个时向上移动到最后一个,位于最后一个时向下移动到第一个,搞定
1.本站内容仅供参考,不作为任何法律依据。用户在使用本站内容时,应自行判断其真实性、准确性和完整性,并承担相应风险。
2.本站部分内容来源于互联网,仅用于交流学习研究知识,若侵犯了您的合法权益,请及时邮件或站内私信与本站联系,我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
5.本站是非经营性个人站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途
暂无评论内容