问题：自定义搜索组件上下间距变大

场景：筛选条件之间有依赖关系，比如：筛选项渠道二，需要通过筛选项渠道一中所选的值，来动态获取数据，这时就需要用表单组件来渲染，这里我用的是ProFormSelect，下面是我的相关代码。

const columns = [
    ...
    {
      title: '一级渠道',
      hideInTable: true,
      renderFormItem: () => {
        return (
          <ProFormSelect
            name={'channelOneLevel'}
            fieldProps={{
              fieldNames: {
                label: 'channelName',
                value: 'id',
              },
              onChange: (e) => {
                setLevel1SearchId(e);
              },
            }}
            showSearch={true}
            request={async () => {
              const params = { level: 1 };
              const res = await getLevelList(params);
              return res.data;
            }}
          />
        );
      },
    },
    {
      title: '二级渠道',
      hideInTable: true,
      renderFormItem: () => {
        return (
          <ProFormSelect
            name="channelTwoLevel"
            showSearch={true}
            fieldProps={{
              fieldNames: {
                label: 'channelName',
                value: 'id',
              },
              options: level2Options,
              optionFilterProp: 'children',
              filterOption: (input, option) => {
                return (option!.children as unknown as string)
                  .toLowerCase()
                  .includes(input.toLowerCase());
              },
              onChange: (e) => {
                setLevel2SearchId(e);
              },
            }}
          />
        );
      },
    },
    ...
]

显示如下：

可以看到筛选框上下的间距非常宽，为了弄清楚是哪里的样式导致的，打开了控制台，排查一下dom渲染结构

对比这两张图可以发现，导致间距变高的原因是，一级渠道在ant-form-item-control-input-content这个下面又渲染了一层ant-form-item，所以导致又多了一层margin-bottom。

分析应该ProFormSelect它是表单组件，所以在样式上，下面会留一些距离，来保证和下一个组件的空间，以及校验不通过时展示报错提示。所以将ProFormSelect组件更换为Select组件

const columns = [
    ...
    {
      title: '一级渠道',
      hideInTable: true,
      dataIndex: 'oneChannelTypeId',
      renderFormItem: () => {
        return (
          <Select
            showSearch
            allowClear={true}
            options={level1Options}
            fieldNames={{
              label: 'channelName',
              value: 'id',
            }}
            optionFilterProp="children"
            filterOption={(input, option: any) => {
              return (option!.channelName as unknown as string)
                .toLowerCase()
                .includes(input.toLowerCase());
            }}
            onSelect={(e: any) => {
              return setLevel1SearchId(e);
            }}
          />
        );
      },
    },
    {
      title: '二级渠道',
      dataIndex: 'twoChannelTypeId',
      hideInTable: true,
      renderFormItem: () => {
        return (
          <Select
            options={level2Options}
            allowClear={true}
            showSearch={true}
            fieldNames={{
              label: 'channelName',
              value: 'id',
            }}
            optionFilterProp="children"
            filterOption={(input, option: any) => {
              return (option!.channelName as unknown as string)
                .toLowerCase()
                .includes(input.toLowerCase());
            }}
            onSelect={(e: any) => {
              setLevel2SearchId(e);
            }}
          />
        );
      },
    }
    ...
]

调整后，效果如下

这样，间距的问题就解决了