vue-vben-admin icon indicating copy to clipboard operation
vue-vben-admin copied to clipboard

Modal 中如果包含form(form比较大) 打开很慢。

Open 157677678 opened this issue 1 year ago • 11 comments

Modal 中如果包含form 的话 打开会等半秒才能打开, 最好能弹窗,然后显示loading 加载完成后再正常操作 。 我现在处理方式是再外面弹出loading 打开成功后再外面关闭loading 而且在外面需要延迟50毫秒执行才能保证loading先弹出 不知道为什么 也不知道应该怎么解决 请教各位有没有更好的办法

157677678 avatar Apr 07 '23 05:04 157677678

正常只需要控制 确认(提交) 按钮的加载状态就行,在useModalInner内这样处理

const [registerModal, { setModalProps }] = useModalInner(async (data) => {
        setModalProps({ confirmLoading: true });
        // 加载数据
        // e.g. record.value = data.record;
        setModalProps({ confirmLoading: false });
});

WitMiao avatar Apr 09 '23 13:04 WitMiao

补充一下问题 描述 首先 vben是在jeecgboot里使用 引用了jeecg里面几个组件

有两个modal 第一个 BasicForm里结构如下 里面大概20个input和 1个Jpopup 点击打开窗口时候 大概会用不到200ms能接受

    <a-card title="稿件信息" :bordered="false">
            <BasicForm @register="registerB" />
        </a-card>

        <a-card title="撰稿人信息" :bordered="false">
            <BasicForm @register="registerW" ref="formElRef">
                <template #JPopup="{ model, field }">
                    <JPopup v-model:value="model[field]" :formElRef="formElRef" code="bus_zhuanjia_report" :width="1000"
                        :multi="false" placeholder="请选择撰稿专家" :fieldConfig="[
                            { source: 'name', target: 'writerName' },
                            { source: 'id', target: 'writerId' },
                            { source: 'id_card', target: 'id_card' },
                            { source: 'bank', target: 'bank' },
                            { source: 'bank_account', target: 'bank_account' }
                        ]" :disabled="jpDisabled" />
                </template>
            </BasicForm>
        </a-card>

        <a-card title="稿费信息" :bordered="false">
            <BasicForm @register="registerF" />
        </a-card>

        <a-card v-show="!isAddFlag" title="其他信息" :bordered="false">
            <BasicForm @register="registerO" />
        </a-card>

第二个 有25个的 JDictSelectTag 及10个input 1个JSelectUserByDept 2个DatePicker 结构如下:(card一共9个)

         <a-card title="基本信息" :bordered="false">
                <BasicForm @register="registerS[0]">

                </BasicForm>
            </a-card>
            <a-card title="立项工作" :bordered="false" v-show="cardFlags.lxShow">
                <BasicForm @register="registerS[1]" />
            </a-card>


            ……

第二个点击后需要400ms才能弹出窗口 体验非常不好 我试过setProps({loading:true;}) 没有用 因为窗口没有弹出 confirmLoading: true也一样

我试过vben里面的加载

        <template v-if="showFlag.loading">
            <div>加载中……</div>
        </template>
        <template v-else> 
          // 9个card
       </template>
 -

在useModalInner()中报错 : useform的resetFields方法中 getform() 不存在

如果 把v-else 内容先 隐藏 ,则跟之前一样 还是400ms弹窗。这时候

我现在采取的方法是在外面调用时候先弹出loading 然后延迟50ms执行openModal 打开成功后emit 然后外层关闭loading

如果不延迟执行,甚至延迟短了 loading都弹不出来。

后来换成drawer也是同样问题 打开缓慢

理想状态应该是先弹出窗口或者抽屉 再动态加载form 不知道应该怎么写,希望指点

157677678 avatar Apr 10 '23 03:04 157677678

请问解决了吗? 我也遇到了 modal中引入a-form和a-table之后,超过1s后弹框才打开

kankantian avatar Jul 06 '23 08:07 kankantian

from表单加到modal后 字段十个左右打开有延迟,关闭有时候会闪一下 有大佬遇到过没有

Xunje avatar Nov 10 '23 07:11 Xunje

特别是modal里面 做分配角色 or 角色分配用户 这种节点更多了 会闪两次

Xunje avatar Nov 10 '23 07:11 Xunje

请问解决了吗? 我也遇到了 modal中引入a-form和a-table之后,超过1s后弹框才打开

解决不了 我策略是让list弹出loading 打开后取消loading 我印象中modal 没有这个打开后的提示 所以我改成drawer 了 然后就没做 如果有更好的方案 希望能分享一下

157677678 avatar Nov 10 '23 07:11 157677678

from表单加到modal后 字段十个左右打开有延迟,关闭有时候会闪一下 有大佬遇到过没有

没有闪 就是慢 解决就是换成drawer 然后加loading 别的我也没想好

157677678 avatar Nov 10 '23 07:11 157677678

从表单添加到模态后字段十个左右打开有延迟,关闭有时候会闪一下有大佬遇到过没有

没有闪就是慢解决办法就是换成抽屉然后加加载其他我也无意好

关闭Modal解决方案直接v-if 不知道 他关闭的时候 还做了什么操作,你可以试试 里面东西多 关闭会卡 打开的时候 我参考一下 谢谢

Xunje avatar Nov 16 '23 08:11 Xunje

从表单添加到模态后字段十个左右打开有延迟,关闭有时候会闪一下有大佬遇到过没有

我也遇到了,大佬解决了吗

1974193036 avatar Dec 05 '23 03:12 1974193036

从表单添加到模态后字段十个左右打开有延迟,关闭有时候会闪一下有大佬遇到过没有

没有闪就是慢解决办法就是换成抽屉然后加加载其他我也无意好

关闭Modal解决方案直接v-if 不知道 他关闭的时候 还做了什么操作,你可以试试 里面东西多 关闭会卡 打开的时候 我参考一下 谢谢

这里有个qq群 133084854 热心大佬建的 可以交流一下

157677678 avatar Dec 05 '23 04:12 157677678

从表单添加到模态后字段十个左右打开有延迟,关闭有时候会闪一下有大佬遇到过没有

我也遇到了,大佬解决了吗

我解决不了 这里有个qq群 133084854 热心大佬建的 可以交流一下

157677678 avatar Dec 05 '23 04:12 157677678

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

anncwb avatar Apr 10 '24 01:04 anncwb