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

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

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

项目需求：

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

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

解决思路：

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

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

遗留问题

2023.7.8更新

问题

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

解决方法

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

      quest({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.checkeddelete parItem.checked}})}})}})this.spinShow = Data = data})

后台返回的数据结构