最新的更新在底部,如果不需要过程,可看最下面的解决方法
项目需求:
要求树形控件要有父子联动,也就是选择父级选项,子级也要选中,那么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
})