前端 - 若依前后端分离版，添加角色，第一次进来的时候，内容显示错乱，如何解决呢？

Question

使用的若依前后端分离版，前端是vue2，点击添加角色，第一次进来的时候，内容显示有点乱，刷新页面，再打开就好了，如何解决呢

<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>      <el-form ref="form" :model="form" :rules="rules" label-width="100px">        <el-form-item label="角色名称" prop="roleName">          <el-input v-model="form.roleName" placeholder="请输入角色名称" />        </el-form-item>        <el-form-item prop="roleKey">          <span slot="label">            <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">              <i class="el-icon-question"></i>            </el-tooltip>            权限字符          </span>          <el-input v-model="form.roleKey" placeholder="请输入权限字符" />        </el-form-item>        <el-form-item label="角色顺序" prop="roleSort">          <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />        </el-form-item>        <el-form-item label="状态">          <el-radio-group v-model="form.status">            <el-radio              v-for="dict in dict.type.sys_normal_disable"              :key="dict.value"              :label="dict.value"            >{{dict.label}}</el-radio>          </el-radio-group>        </el-form-item>        <el-form-item label="菜单权限">          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>          <el-tree            class="tree-border"            :data="menuOptions"            show-checkbox            ref="menu"            node-key="id"            :check-strictly="!form.menuCheckStrictly"            empty-text="加载中，请稍候"            :props="defaultProps"          ></el-tree>        </el-form-item>        <el-form-item label="备注">          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>        </el-form-item>      </el-form>      <div slot="footer" class="dialog-footer">        <el-button type="primary" @click="submitForm">确 定</el-button>        <el-button @click="cancel">取 消</el-button>      </div>    </el-dialog>

Answer 1

你这个菜单权限设置一下position absolute z-index,一看应该是图层出现了覆盖,调整一下图层应该就行了

Answer 2

猜测是样式问题 可以通过F12审查元素调整