解决el-dialog缓存问题

解决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>



重点:

:visible.sync=“centerDialogVisible_6”
v-if=“centerDialogVisible_6” //核心代码






你可能感兴趣的:(vue,学习,javascript,ecmascript)