BasicModal内容太大，弹出缓慢。

157677678 commented 1 year ago

版本号：

3.5.0

问题描述：

modal里form太大，弹出响应很慢应该如何编写，才能先打开窗口，再加载窗口里面内容？

截图&代码：

友情提示（为了提高issue处理效率）：

未按格式要求发帖，会被直接删掉;
请自己初判问题描述是否清楚，是否方便我们调查处理；
描述过于简单或模糊，导致无法处理的，会被直接删掉；

zhangdaiscott commented 1 year ago

多大？怎么个慢？请详细描述

157677678 commented 1 year ago

多大？怎么个慢？请详细描述

有两个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;}) 没有用因为没有窗口

我试过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也是同样问题打开缓慢

我个人是个老后端，前端经验只有html js，对vue完全不了解希望各位多指点。

lsqGitHub716 commented 1 year ago

内容过多的时候尝试一下使用tab给拆分一下；或者使用v-if方式，然后优化一下在useModalInner()中里面的 useform的写法，防止报错；或者使用原生antd vue From表单原生写法 Ant Design Vue；

157677678 commented 1 year ago

或者使用v-if方式，然后优化一下在useModalInner()中里面的 useform的写法，防止报错；

这个怎么优化呢？能给个思路或者简单例子吗？这个确实不太会

jeecgboot / JeecgBoot