如图所示:红框内的是公共数据,我们想要实现的是,左边树的节点被选择,右边也会选择上,选择右边,左边也会被选择。
思路:element ui 文档中没有找到实现这种效果的方法,我们可以把两边的tree分别拆分成两棵树----左边的tree=commonTree+自己独有部分;右边tree=commonTree+自己独有部分。
实现:
左边:
右边:
props: {
limitations: { // 从父组件传递过来的需要被checked的树节点id
type: Array,
required: true
}
},
data () {
return {
commonID: [], // 先给树节点的默认选中项赋空值,然后在watch中监控弹框是否出现,然后赋值
tscID: [],
lockID: [],
parentIds: [], // parentIds用于存放所有父节点id
}
}
watch: {
dialogFormVisible(newValue){ //dialogFormVisible 监控弹框的出现 并给树节点赋值
if (newValue){
//初始值过滤掉父节点 只有子节点才会有checked状态
this.commonID = this.role.limitations.filter(value => !this.parentIds.includes(value));
this.tscID = this.role.limitations.filter(value => !this.parentIds.includes(value));
this.lockID = this.role.limitations.filter(value => !this.parentIds.includes(value));
}
}
},
methods: {
getParentId(role){ // 利用递归的方法获取所有父节点id
if (role.children_node){
this.parentIds.push(role.id)
role.children_node.forEach(value => {
this.getParentId(value)
})
}
}
initLimitationAllTree () { //获取树的所有数据 然后分发给几棵树
this.loading = true
getLimitationAllTree().then(response => { //接口getLimitationAllTree
this.limitationsOptions = response.data.data
let all = []
let tsc = []
let lock = []
this.limitationsOptions.forEach(item => {
this.getParentId(item) // 调用getParentId递归方法 获取所有父节点id
if (item.action_scope === "$all$") {
all.push(item)
}if (item.action_scope === "$tsc$") {
tsc.push(item)
} else if (item.action_scope === "$interlock$") {
lock.push(item)
}
})
this.common = all;
this.tsc = tsc;
this.lock = lock;
this.loading = false
}).catch(error => {
this.$messageErr.error(error)
this.loading = false
})
},
expandNodeCommon(params, value) { // 节点被展开时触发的事件
const node = value ? this.$refs.treeCommonLock.getNode(params[0]) : this.$refs.treeCommonTsc.getNode(params[0])
node.expand()
},
collapseNodeCommon(params, value) { // 节点被关闭时触发的事件
const node = value ? this.$refs.treeCommonLock.getNode(params[0]) : this.$refs.treeCommonTsc.getNode(params[0])
node.collapse()
},
handleCheckChangeCommon (value) { // 控制两边common树的联动
const selectedIds = this.$refs.treeCommonTsc.getCheckedKeys()
if (value === 'tsc') {
if (this.commonID.toString() === selectedIds) {
return
}
this.commonID = selectedIds
// 将 ‘tsc’ 的common树的所有节点给 'lock'的common树 实现联动
this.$refs.treeCommonLock.setCheckedKeys(this.commonID)
}
if (value === 'lock') {
const selectedIds = this.$refs.treeCommonLock.getCheckedKeys()
if (this.commonID.toString() === selectedIds.toString()) {
return
}
this.commonID = selectedIds
this.$refs.treeCommonTsc.setCheckedKeys(this.commonID)
}
},
editLimitations () {
let arr1 = this.$refs.treeCommonTsc.getHalfCheckedKeys() // common树的所有父节点id
let arr2 = this.$refs.treeCommonTsc.getCheckedKeys() // common树的所有子节点id
let arr3 = this.$refs.treeTsc.getHalfCheckedKeys()
let arr4 = this.$refs.treeTsc.getCheckedKeys()
let arr5 = this.$refs.treeLock.getHalfCheckedKeys()
let arr6 = this.$refs.treeLock.getCheckedKeys()
// 将三棵树的所有父节点和子节点id 存入this.role.limitations 中
this.role.limitations = arr1.concat(arr2).concat(arr3).concat(arr4).concat(arr5).concat(arr6)
console.log(this.role.limitations)
this.dialogFormVisible = false
},
}