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
        })

后台返回的数据结构