麻烦问下QueryBar是否支持像antdPro里的QueryFilter的高级搜索功能？

[goudanz]

有个列表的搜索条件有点多。想弄个类似这个的展开折叠。。现有的queryBar支持这个嘛？还是要我手动实现呢？

https://procomponents.ant.design/components/query-filter

[zkboys]

支持，相关API：

[goudanz]

大佬。你们的ralib文档有点不全呀。。。

要是全点。我们这能全使用您这套脚手架。。。嘿嘿

[goudanz]

支持，相关API：

这个文档有具体的地址嘛？

[goudanz]

显示了！

[goudanz]

按钮是出来了。但是点击没变化。所以我要在onCollapsedChange事件里写 隐藏的代码 是嘛？

[goudanz]

我看了index.esm.js里的代码，发现了：

FormElement.propTypes = {
...
hidden: PropTypes.any,
}

创建FormElement时是有这个hidden属性的，但是为啥在我的业务代码中不生效？

这是我的部分代码：

const [collapsed, setCollapsed] = useState(false);

async function doCollapsed() {
    setCollapsed(! collapsed);
}

<QueryBar collapsed={collapsed} onCollapsedChange={doCollapsed}>
      <FormElement
            {...formProps}
            type="select"
            mode="multiple"
            hidden={!collapsed}
            label="列表"
            maxTagCount={1}
            name="list"
            options={list}
        />
</QueryBar>

[goudanz]

我看了index.esm.js里的代码，发现了：

FormElement.propTypes = {
...
hidden: PropTypes.any,
}

创建FormElement时是有这个hidden属性的，但是为啥在我的业务代码中不生效？

这是我的部分代码：

const [collapsed, setCollapsed] = useState(false);

async function doCollapsed() {
    setCollapsed(! collapsed);
}

<QueryBar collapsed={collapsed} onCollapsedChange={doCollapsed}>
      <FormElement
            {...formProps}
            type="select"
            mode="multiple"
            hidden={!collapsed}
            label="列表"
            maxTagCount={1}
            name="list"
            options={list}
        />
</QueryBar>

我只有改成这样：

{collapsed ?  <FormElement
            {...formProps}
            type="select"
            mode="multiple"
            label="列表"
            maxTagCount={1}
            name="list"
            options={list}
/>: null}

才能生效；是需要我这样做嘛？

[zkboys]

使用 import {FormItem} from 'ra-lib';，不要使用FormElement，FormElement是做老版本兼容使用的，已经弃用了。

[goudanz]

使用 import {FormItem} from 'ra-lib';，不要使用FormElement，FormElement是做老版本兼容使用的，已经弃用了。

好的

[goudanz]

使用 import {FormItem} from 'ra-lib';，不要使用FormElement，FormElement是做老版本兼容使用的，已经弃用了。

v5版本里使用FormItem 整个表单的样式会错乱。。。

[goudanz]

然后我自己写了样式控制：

    const layout = {
        labelCol: {
            span: 7
        },
        wrapperCol: {
            span: 16
        }
    };

 <Form
                {...layout}
/>

虽然部分对齐了。但其他的各种组件更乱了。

[zkboys]

那就继续使用 FormElement， 可以使用div控制显示隐藏，不要用三元判断，否则form表单会丢失隐藏元素的数据。

<div style={{display: collapsed ? 'none' : 'block'}}>
FormElement1
FormElement2
FormElement3
</div>

[goudanz]

那就继续使用 FormElement， 可以使用div控制显示隐藏，不要用三元判断，否则form表单会丢失隐藏元素的数据。

<div style={{display: collapsed ? 'none' : 'block'}}>
FormElement1
FormElement2
FormElement3
</div>

我把

 const layout = {
        labelCol: {
            span: 7
        },
        wrapperCol: {
            span: 16
        }
    };

改成

    const layout = {
        labelCol: {flex: '100px'},
    };

没有太乱了

[goudanz]

我把master版本里：https://github.com/sxfad/react-admin/blob/master/src/pages/menus/MenuEdit.jsx 的布局代码搬过来了。

[goudanz]

谢谢您！ 麻烦您啦