【element-UI的BUG】树图回显级联

最新推荐文章于 2024-08-21 09:34:20 发布

程序员大雨

最新推荐文章于 2024-08-21 09:34:20 发布

阅读量1k

点赞数 3

文章标签： bug

本文链接：https://blog.csdn.net/tomorrow9813/article/details/131108861

版权

文章讲述了在使用element-UI的Tree组件时遇到的回显级联Bug，即用户只应显示部分菜单但因级联效果显示了全部。通过设置`check-strictly`属性并控制其值，实现了在回显时关闭级联效果，重新赋权时开启。文章提供了详细的解决方案，包括在Vue.js中如何处理数据和调用API进行权限更新。

摘要由CSDN通过智能技术生成

什么是回显级联Bug，先看大屏幕。

该用户只拥有父菜单下的某一个子菜单功能，而且从后端传过来的值也是对的，但是在显示的时候，却连同父菜单一同显示了。

这就是级联效果。可以算是1个显示bug。

在解决此问题之前，我们先了解element-UI 中的 Tree 树形控件的其中一个属性，check-strictly，官方对此属性解释是：在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false。即当它为false时，是有级联效果的。

check-strictly="false"

也就是说，因为有级联效果，所以可能会导致我们回显用户拥有的菜单选项时，有些问题。

所以，我们要达到的目标：

在回显的时候，树图不要有级联效果，重新赋值时，树图要有级联效果。

那么我们要怎么做呢？

首先，我们先给级联效果一个变量值 "isCheck"，方便后续控制。

<el-tree
   :data="menuData"
   show-checkbox
   node-key="id"
   ref="tree"
   :check-strictly="isCheck"
   :default-checked-keys="defaulMenu"
   :props="defaultProps">
</el-tree>

接着，我们去后台请求得到用户拥有的菜单数据，回显数据时，关掉级联效果。


queryMenuAuth(userId) {
      //查询所有菜单、查询选用的用户的菜单，并在菜单树图上回显
      this.userId = userId
      //这里要给用户赋权，所以用户id从前台传过去
      this.$axios
        .get("api/menu/queryMenuAuth?userId=" + userId) 
        .then(res => {
          if (res.data.code == 200) {
             //回显的时候树图关掉级联效果
            this.isCheck = true, 
            //搞个延迟，后台数据给data区域里赋值需要时间
              this.$nextTick(() => {
                this.menuData = res.data.data.menusNode;
                this.defaulMenu = res.data.data.menuIds;
            //再打开级联效果
                this.isCheck = false;
              });
            //打开对话框
            this.dialogMenuAuth = true;
          }
        });
    }

在重新赋权后，要同时用2个方法，把所有的id往后台传。

获取我们勾选中的id方法:

let checkmenu = this.$refs.tree.getCheckedKeys();//获取选中的id

获取级联的id方法：（也就是当我们仅勾选了子菜单，在传数据时，也要把它的父菜单id也传过去）

let halfmenu = this.$refs.tree.getHalfCheckedKeys();//获取集合的id

然后把这两个集合并做1个集合，往后台传。

let menuIds = checkmenu.concat(halfmenu);//两个集合变1个集合

提交重新赋权点击确认的完整代码

saveUserAuth(){
        //保持新的菜单授权信息
        //获取选中的id
        let checkmenu = this.$refs.tree.getCheckedKeys();
        //获取集合的id
        let halfmenu = this.$refs.tree.getHalfCheckedKeys();
        //两个集合变1个集合
        let menuIds = checkmenu.concat(halfmenu);
        let param = {}
        //这里的名字要和后端实体类VO一致 不然映射不过去
        param.menuIds = menuIds 
        param.userId = this.userId
        console.log(param)
        this.$axios.post('api/menu/saveUserMenuAuth',param)
        .then(res=>{
            console.log(res.data)
        })
        this.dialogMenuAuth = false;
    }

你学会了吗？