pro-table自定义搜索栏与antd design对话框的搭配使用

效果图如下：

 首先，在pro-table文档里找到列定义属性renderFormItem，该属性可以让你重写查询表单的输入组件（展示部门代码）

{
    title: '主持人',
    dataIndex: 'userId',
    hideInTable: true,
    key: "name",
    renderFormItem: (_, { type, defaultRender, ...rest }, form) => {
      return <DepartInfo data={rest} form={form} />
    }

这样，你就可以在组件DepartInfo里编写自己想要的组件代码（在组件内嵌入Input、Modal以及相应的树形控件即可，具体看文档可以操作）。

接着，点击选中数据项右侧展示情况，在antd design找到API，使用onSelect（点击树节点触发）触发监听函数，将选中数据通过useState保存到自己定义的变量里，如：

const [selectValue, setSelectValue] = useState([])
...

这是树形控件和相关配置
<DirectoryTree
          // loadData={onLoadData}
          expandedKeys={expandedKeys}
          autoExpandParent={autoExpandParent}
          multiple
          onSelect={onSelect}
          onExpand={onExpand}
          treeData={loop(treeDatas)}
        />

......
右侧相关展示（less样式忽略）
<div className={styles.rightContent}>
        {/* right */}
        <div className={styles['title']}>已选择成员</div>
        <ul className={styles['rightUl']}>
          {selectValue.map((item: any, i: number) => {
            return <li key={item.key} className={styles['selectItem']}>
              {item.title}
              <span className={styles['remove']} title="删除" onClick={() => remove(i)}><DeleteOutlined /></span>
            </li>
          })}
        </ul>
      </div>

remove函数即对数据数组进行截取

最后，点击确认后，我们需要将查找的数据项通过上图（第一张）的传进组件里的form，先通过form.getFieldsValue()，先获取上一个搜索框的内容，进而与现在的搜索值进行拼接成一个新的对象

const handleOk = (e) => {
    console.log("handleOK", e);
    // 获取之前值
    const values = form.getFieldsValue();
    form.setFieldsValue({
      ...values,
      name: mobile ///此处为自己需要搜索的数据
    })
    setIsModalVisible(false)
    console.log(values);
  }

（其他对话框中搜索表单的功能实现可在antd文档中找到）