Tree树形控件做权限时,保持选项联动的同时,解决数据无法回显的问题

最新的更新在底部,如果不需要过程,可看最下面的解决方法

项目需求:

在这里插入图片描述

要求树形控件要有父子联动,也就是选择父级选项,子级也要选中,那么check-strictly属性就不能设置死,我的是 :check-strictly='checkStrictly',在data中赋值有变量。我之前设置check-strictly,就没了联动效果,所以这边做了一下处理。

          <Tree
            :data="treeData"
            ref="tree"
            :check-strictly='checkStrictly'
            show-checkbox
            empty-text
            @on-check-change='treeChange'
          >
          </Tree>

解决思路:

主要是check-strictly要设置动态的,在tree数据设置之前先为true,代表父子不关联,等赋值完数据并且渲染后,再把check-strictly设置false,代表父子联动。这样点击选中控件选项后,数据就是联动的,最后再用getCheckedAndIndeterminateNodes()得到全选和半选的数组。

   //点击tree触发
    treeChange () {
    
    
      this.isSave= false
      let roleData = this.$refs.tree.getCheckedAndIndeterminateNodes()
      let roleIds = []
      roleData.forEach(res=>{
    
    
        roleIds.push(res.id)
      })
      this.treeDataIds = roleIds
      console.log(this.treeDataIds)
    },
    // 表格行点击事件
    handleRowClick (row) {
    
    
      this.spinShow = true //局部加载
      this.checkStrictly=true  //开始赋值之前先为true
      this.roleId = row.id
      console.log('点击表格行:', row.id)
      axios
        .request({
    
    
          url: '/system-role/get-permissions-menu/' + row.id,
          method: 'get'
        })
        .then((res) => {
    
    
          const data = res.data.data // 获取原始数据
          this.spinShow = false
          this.treeData = data
          setTimeout(res=>{
    
    
            this.checkStrictly=false  //赋值之后为false,这样设置后还是有联动的,完美解决
          },1000)
          console.log(this.treeData,'this.treeData')
        })
    }

遗留问题

2023.7.8更新

问题

今天在测试的时候发现一个bug,就是上面所说方法的遗留问题,主要是我后台获取数结构数据,数据结构返回有checked=true,其实我有子级菜单未选中,父级菜单为true,导致我只要一触发tree组件的事件就会触发全选,原因就是父子联动带来的问题,只要父级是true,那么子级也会为true

解决方法

直接为原始数据写一个查询修改原始数据(如果不确定级别可以使用递归查询),检查子级也就是children的是否存在,如果存在继续检查子级children是否存在,一直查询到没有children,那么就可以看看最后一级是否有未勾选的数据权限,如果有,就把所有的父级checked都删除掉。
具体代码如下:

      axios
        .request({
    
    
          url: '/system-role/get-permissions-menu/' + row.id,
          method: 'get'
        })
        .then((res) => {
    
    
          let data = res.data.data // 获取原始数据
          data.forEach(parItem => {
    
    
            if (parItem.children) {
    
    
              parItem.children.forEach(sonItem => {
    
    
                if (sonItem.children) {
    
    
                  sonItem.children.forEach(graItem => {
    
    
                    if (!graItem.checked) {
    
    
                      delete sonItem.checked
                      delete parItem.checked
                    }
                  })
                }

              })
            }
          })
          this.spinShow = false
          this.treeData = data
        })

后台返回的数据结构

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_34082921/article/details/131501357