antDesign ProComponent proFormList+联动Select实现方案

ZekiSong

已于 2022-12-06 17:26:44 修改

阅读量1.6k

点赞数

分类专栏： react 文章标签： react.js javascript

于 2022-11-29 14:43:34 首次发布

本文链接：https://blog.youkuaiyun.com/song_xz/article/details/120019218

版权

react 专栏收录该内容

1 篇文章

订阅专栏

这段代码展示了如何在React应用程序中使用ProFormList和ProFormSelect组件来创建一个动态的表单。表单包含两个依赖字段的ProFormSelect组件，分别用于选择对应类型选项和对应的子选项。初始值由data对象设置，同时支持新增和复制操作。表单元素的更新会触发相应的onChange回调以处理选中项的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码

父级 ProFormList

<ProFormList
  label="对应类型选项"
  name="postTypeItems"
  initialValue={data?.postTypeItems?.map((type: any) => {
    return {
      postTypeId: type.postTypeId,
      postItemIds: type.postItemVos.map((item: any) => seq.id),
    };
  })}
  creatorButtonProps={{
    creatorButtonText: '新增',
    position: 'bottom',
    style: { width: '368px' },
  }}
  copyIconProps={false}
  itemRender={({ action }, { field }) => formListItem(action, field)}
>
  
</ProFormList>

formListItem

const formListItem = (action: React.ReactNode, field: any) => {
  return (
    <div style={{ display: 'flex' }}>
      {
        <ProFormGroup style={{ gap: '10px' }}>
          <ProFormDependency name={['idx']} ignoreFormListField={false}>
            {() => {
              return (
                <ProFormSelect
                  showSearch
                  name="postTypeId"
                  options={postTypeOptions}
                  fieldProps={{
                    onChange: (value: string) => {
                      //field.key对应索引index
                      //获取选项配置
                      getItemOptions(value, field.key);
                    },
                  }}
                  width={114}
                />
              );
            }}
          </ProFormDependency>

          <ProFormDependency name={['postTypeId']} ignoreFormListField={false}>
            {({ postTypeId }) => {
              return (
                <ProFormSelect
                  showSearch
                  mode="multiple"
                  name="postItemIds"
                  options={postItemOptions[postTypeId]}
                  // 自定义多选Tags
                  // fieldProps={{
                  //   tagRender: (item: any) => {     
                  //     return (
                  //       <Tag
                  //         style={{
                  //           padding: '2px 4px',
                  //           margin: '2px 0',
                  //         }}
                  //         closable
                  //         onClose={() => {
                  //           item.onClose();
                  //         }}
                  //       >
                  //         {item.label}
                  //       </Tag>
                  //     );
                  //   },
                  // }}
                  width={200}
                ></ProFormSelect>
              );
            }}
          </ProFormDependency>
        </ProFormGroup>
      }
      //操作dom
      {action}
    </div>
  );
};