sxfad / react-admin

基于 Ant Design React 的管理系统架构
https://sxfad.github.io/react-admin
608 stars 169 forks source link

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

Closed goudanz closed 3 years ago

goudanz commented 3 years ago

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

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

image

image

zkboys commented 3 years ago

支持,相关API: image

goudanz commented 3 years ago

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

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

goudanz commented 3 years ago

支持,相关API: image

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

goudanz commented 3 years ago

image

显示了!

goudanz commented 3 years ago

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

goudanz commented 3 years ago

我看了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 commented 3 years ago

我看了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 commented 3 years ago

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

goudanz commented 3 years ago

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

好的

goudanz commented 3 years ago

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

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

goudanz commented 3 years ago

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

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

 <Form
                {...layout}
/>

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

zkboys commented 3 years ago

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

<div style={{display: collapsed ? 'none' : 'block'}}>
FormElement1
FormElement2
FormElement3
</div>
goudanz commented 3 years ago

那就继续使用 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 commented 3 years ago

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

goudanz commented 3 years ago

谢谢您! 麻烦您啦