antDesign ProComponent proFormList+联动Select实现方案

直接上代码 

父级 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>
  );
};