GeekQiaQia/vue3.0-template-admin

fullcalander只渲染了一部分

enginefuture opened this issue · 0 comments

您好,想请问一个问题,我把个人主页页面当到了对话框,打开对话框后,日历组件不能全部渲染出来。

<template>
  <el-dialog
    :model-value="dialogVisible"
    @close="close"
    :title="mode === 'add' ? '新增' : mode === 'edit' ? '编辑' : '查看'"
    width="90%"
    @open="handleDialogOpen"
    draggable
  >
    <el-tabs @update:modelValue="handleTabChange">
      <el-tab-pane label="个人中心">
        <div class="page-container">
          <div class="info" />
          <el-row :gutter="20">
            <el-col :span="7" :offset="1">
              <el-card class="box-card">
                <div class="account-avatar">
                  <img src="../../assets/avatar-default.jpg" />
                  <div class="account-name">极客恰恰</div>
                  <div class="account-sign">极客签名,持续学习</div>
                </div>
                <div class="account-detail">
                  <el-descriptions class="detail" :column="1" :size="size">
                    <el-descriptions-item>
                      <template #label>
                        <i class="el-icon-user" />
                        用户名:
                      </template>
                      sara
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <i class="el-icon-user" />
                        角色:
                      </template>
                      {{ roles }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <i class="el-icon-chat-dot-round" />
                        状态:
                      </template>
                      在职
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <i class="el-icon-location-information" />
                        地址:
                      </template>
                      上海市虹口区
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
                <div class="divider divider-dashed" />
                <div class="tag-title"><span>标签</span></div>
                <div class="tag-dynamic">
                  <el-tag
                    v-for="tag in dynamicTags"
                    :key="tag"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                  >
                    {{ tag }}
                  </el-tag>
                  <el-input
                    v-if="inputVisible"
                    ref="saveTagInput"
                    v-model="inputValue"
                    class="input-new-tag"
                    size="small"
                    @keyup.enter="handleInputConfirm"
                    @blur="handleInputConfirm"
                  />
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInput"
                    >+ New Tag</el-button
                  >
                  <div class="divider divider-dashed" />
                </div>
              </el-card>
            </el-col>

            <el-col :span="15" :push="0">
              <el-card class="box-card">
                <fullcalendar />
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="个人设置"> 设置 </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

image
日历组件只渲染了一部分,拖动窗口后大小后,才会完全渲染完成。