解决 el-tree setChecked 方法偶尔失效的方法

目前在大多数公司中,菜单的权限控制都是不可或缺的功能

在和后端配合做权限控制的时候不可避免的会用到 el-tree

然而这个组件本身带的坑不少

我们需要回显对应角色拥有的菜单,在不严格的模式下,父节点的选中会连带子节点的选中

如果 ,你使用的 setCheckedKeys ,那么你的回显一定是不正确的

此时不得不用到另一个方法 setChecked ,然后你会发现dom 刷新的时候 这个方法又失效了

原因是:dom树刷新了 ,使得树节点对应的treeId刷新了

解决方法如下:在调用setChecked的方法外边包一层延时器(setTimeout)即可解决

复制代码
<template>
  <div class="app-container">
    <el-dialog title="权限管理" :visible.sync="menuRelationVis">
      <el-tree ref="menuTreeRef" 
        :data="menuTreeData"
        node-key="id"
        show-checkbox
        :props="{label:'name',children:'children',isLeaf:'leaf'}">
      </el-tree>
      <br>
      <div style="display: flex;justify-content: center;">
        <el-button @click="menuRelationVis = false">取消</el-button>
        <el-button type="primary" @click="submitMenuRelation">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import rolesApi from '@/api/roles.js'
  export default {
      data(){
          return{
              menuRelationVis:false,
              curRoleId:null,
              menuTreeData:[]
          }
      },
      methods:{
          async menuManage(id){
              this.menuRelationVis = true
              this.curRoleId = id
              await this.getMenuTreeData()
              await this.getHasMenuByRoleId(id)
          },
          getHasMenuByRoleId(id){
              rolesApi.queryRoleElement({roleId:id}).then(res=>{
                  if(res.code === 0){
                      console.log(this.$refs.menuTreeRef);
                      res.data.forEach(val => {
                          let a = setTimeout(()=>{
                              this.$nextTick(() => {
                                  this.$refs.menuTreeRef.setChecked(val, true, false)
                                  clearTimeout(a)
                                  console.log('setChecked');
                              })
                              this.$forceUpdate()
                          },100)
                      })
                  }else{
                      this.$message.error(res.msg)
                  }
              }).catch(err=>{
                  this.$message.error('查询角色权限信息失败')
              })
          },
          submitMenuRelation(){
              let checkKeys = this.$refs.menuTreeRef.getCheckedKeys()
              let halfCheckKeys = this.$refs.menuTreeRef.getHalfCheckedKeys()
              rolesApi.relatedElement({
                  roleId: this.curRoleId,
                  elementIds: checkKeys.concat(halfCheckKeys)
              }).then(res=>{
                  if(res.code === 0){
                      this.menuRelationVis = false
                      this.$message.success('修改角色权限成功')
                  }else{
                      this.$message.error(res.msg)
                  }
              }).catch(err=>{
                  this.$message.error('修改角色权限失败')
              })
          }
      }
  }
</script>
相关推荐
计算机学姐2 小时前
基于微信小程序的高校班务管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
哆啦A梦15886 小时前
点击Top切换数据
前端·javascript·vue.js
小光学长7 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH7 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
麦麦大数据8 小时前
D027 v2 vue+django+neo4j 基于知识图谱红楼梦问答系统 (新增问关系功能;新增知识节点和关系管理功能,neo4j增删改查功能)
vue.js·django·问答系统·知识图谱·neo4j·图谱管理·neo4j增删改查
专注前端30年9 小时前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
菜鸟una9 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年10 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
Highcharts.js10 小时前
选择合适的组合:如何打造数据可视化的“黄金组合”
javascript·信息可视化·highcharts·交互式图表开发
angelQ11 小时前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript