解决el-dialog缓存问题

最新推荐文章于 2024-03-28 10:48:06 发布

划水小将军

最新推荐文章于 2024-03-28 10:48:06 发布

阅读量1.2k

点赞数 1

分类专栏： vue 学习文章标签： javascript ecmascript

本文链接：https://blog.csdn.net/qq_44309969/article/details/126418152

版权

学习同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

解决el-dialog缓存问题

弹出框里面还使用了其他的组件。
首次打开正常、打开别的也正常、在打开首次打开的出现异常；
怀疑是缓存问题

有问题的代码

     <el-dialog
       title="修改角色"
       :visible.sync="centerDialogVisible_6"
       width="400px"
       top="156px"
       class="newPer"
     >
       <div class="role_permissions">
         <p>角色名称：</p>
         <el-input v-model="newRole" placeholder="请输入角色名称" class="role_permissions_input" /><i class="i1">*</i><i class="i2">*</i>
         <p>角色权限：</p>
         <div class="div_role_permissions">
           <el-tree
             ref="tree"
             :data="tree"
             :props="defaultProps"
             show-checkbox
             highlight-current
             node-key="id"
             default-expand-all
             :default-checked-keys="permissionsIds"
             @check-change="handleCheckChange"
           />
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button style="margin-right:30px;" @click="centerDialogVisible_6 = false">取 消</el-button>
         <el-button type="primary" style="margin-right:90px;" @click="change_role_permissions()">确 定</el-button>
       </span>
     </el-dialog>

最终代码

     <el-dialog
       title="修改角色"
       :visible.sync="centerDialogVisible_6"
       v-if="centerDialogVisible_6"   //核心代码
       width="400px"
       top="156px"
       class="newPer"
     >
       <div class="role_permissions">
         <p>角色名称：</p>
         <el-input v-model="newRole" placeholder="请输入角色名称" class="role_permissions_input" /><i class="i1">*</i><i class="i2">*</i>
         <p>角色权限：</p>
         <div class="div_role_permissions">
           <el-tree
             ref="tree"
             :data="tree"
             :props="defaultProps"
             show-checkbox
             highlight-current
             node-key="id"
             default-expand-all
             :default-checked-keys="permissionsIds"
             @check-change="handleCheckChange"
           />
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button style="margin-right:30px;" @click="centerDialogVisible_6 = false">取 消</el-button>
         <el-button type="primary" style="margin-right:90px;" @click="change_role_permissions()">确 定</el-button>
       </span>
     </el-dialog>