pro-components 👑 [功能] 两个嵌套的 ProFormList，内层 ProFormList 的 ProFormSelect 如何监听外层 ProFormList下 ProFormSelect 改变动态获取opitons

👑 [功能] 两个嵌套的 ProFormList，内层 ProFormList 的 ProFormSelect 如何监听外层 ProFormList下 ProFormSelect 改变动态获取opitons

Open cuijiudai opened this issue 3 years ago • 2 comments

trafficstars

🔩 所属模块或组件

pro-form

🥰 需求描述

两个嵌套的 ProFormList，内层 ProFormList 的 ProFormSelect 如何监听外层 ProFormList下 ProFormSelect 改变，监听到改变或，内层ProFormSelect 重新调用request重置options。

我有两个嵌套的 ProFormList，大体如下结构

 ProFormList
     A 
     ProFormList
          B (依赖A)

B需要根据A的选择动态获取 options。请问B 的 dependencies 如何写？或者不用 dependencies 如何做？

        <ProFormList
          name="swaggerApis"
          min={0}
          initialValue={[]}
          creatorRecord={{ appId: '' }}
          creatorButtonProps={{
            creatorButtonText: '添加服务',
          }}
        >
          <ProFormSelect
            options={apps}
            fieldProps={{
              fieldNames: { label: 'appName', value: 'appId' },
            }}
            name="appId"
            label={'服务'}
          />
          <ProFormList
            name="swaggerApiVOList"
            label=""
            min={1}
            creatorButtonProps={{
              creatorButtonText: '添加地址',
              icon: false,
              type: 'link',
              style: { width: 'unset', float: 'right', paddingRight: 0 },
            }}
            initialValue={[
              {
                uri: '',
              },
            ]}
          >
            <ProFormSelect
              labelCol={{ style: { width: '115px' } }}
              dependencies={['swaggerApis']}
              fieldProps={{
                fieldNames: { label: 'uri', value: 'uri' },
              }}
              name="uri"
              rules={[
                {
                  required: true,
                },
              ]}
              request={async (deps) => {
                //TODO 联动请求
                debugger;
              }}
              label={'接口地址'}
            />
          </ProFormList>
        </ProFormList>