el-tree - 选中父级，子级不选中
2020-12-02 •
评论
组件
<!--
选中父级，子级不选中
-->
<template>
<div>
<el-tree
:data="data"
:props="props"
:check-strictly="checkStrictly"
ref="tree"
:node-key="nodeKey"
@check="getCheckedKeys"
show-checkbox
:default-expanded-keys="Expandeds"
:default-checked-keys="Selecteds">
</el-tree>
</div>
</template>
<script>
export default {
props: {
/* checkStrictly: {
type: Boolean,
default () {
return false
}
}, */
nodeKey: {
type: String,
default () {
return []
}
},
Selecteds: {
type: Array,
default () {
return []
}
},
Expandeds: {
type: Array,
default () {
return []
}
},
options: {
type: Array,
default () {
return []
}
},
// 树节点配置选项
props: {
type: Object,
default () {
return []
}
}
},
data () {
return {
TreeData: [],
AllData: [],
flag: false,
checkStrictly: true
}
},
watch: {
Selecteds () {
// this.TreeData = this.Selecteds
let that = this
this.checkStrictly = true
this.$nextTick(() => {
that.TreeData = that.Selecteds
that.$refs.tree.setCheckedKeys(that.Selecteds)
// that.checkStrictly = false
})
}
},
computed: {
data () {
return this.options
}
},
methods: {
orgCheckChange (data, checked, indeterminate) {
},
/* 获取当前树的ID值 */
getCheckedKeys (node, keys) {
// console.log(node)
// console.log(keys)
let that = this
this.flag = true
// let checkedKeys = keys.checkedKeys
// let halfChecked = keys.halfCheckedKeys
// let checkArr = checkedKeys.concat(halfChecked)
// this.TreeData = checkedKeys
// this.AllData = checkArr
this.setNode(this.$refs.tree.getNode(node.locationId))
this.$nextTick(function () {
that.AllData = that.$refs.tree.getCheckedKeys()
})
},
// 递归设置子节点和父节点
setNode (node) {
if (node.checked) {
// 如果当前是选中checkbox,则递归设置父节点和父父节点++选中
this.setParentNode(node)
} else {
// 如果当前是取消选中checkbox,则递归设置子节点全部取消选中
this.setChildNode(node)
}
},
// 递归设置父节点全部选中
setParentNode (node) {
if (node.parent) {
for (const key in node) {
if (key === 'parent') {
node[key].checked = true
this.setParentNode(node[key])
}
}
}
},
// 递归设置子节点全部取消选中
setChildNode (node) {
if (node.childNodes && node.childNodes.length) {
node.childNodes.forEach(item => {
item.checked = false
this.setChildNode(item)
})
}
}
}
}
</script>