a-tree 实现父级节点禁用，通过子级节点勾选状态控制
a-tree 组件实现折叠选择；使其父级节点禁用，通过子级节点的勾选状态来控制是否勾选；如果子级节点勾选任一个，父级节点就勾选中，如果子级节点全部不勾选则父节点不勾选，否则勾选 ，效果如下：
代码实现如下所示：
1、封装组件 setTableToolbar
vue 部分
js部分代码设置：
export default {
name: 'setTableToolbar',
components: {
},
props: {
columns: {
type: Array,
default: [],
}
},
data(){
return {
expandParent: true,
expandedKeys: [],
indeterminate: true,
userInfo: {},
checkAll: false,
checkedList: [],
plainOptions: [],
Downtype: false
}
},
watch: {
checkedList() { // 监听设置
this.isCheckedAll()
},
},
methods:{
open(){
this.$refs.vxePulldown.togglePanel()
if(this.Downtype){
this.sumbitOk()
// this.$refs.vxePulldown.hidePanel()
} else {
this.Downtype = !this.Downtype
}
},
// 隐藏 执行保存
hidePanel(){
this.sumbitOk()
},
// 父级节点展开、收缩事件
onExpand(select, e){
let val = e.node.eventKey || ''
if(this.expandedKeys.indexOf(val) > -1) {
this.expandedKeys.splice(this.expandedKeys.indexOf(val), 1)
} else {
this.expandedKeys.push(val)
}
},
//
/**
* 初始设置
* @param {*} arr 所有选择项
* @param {*} selearr 已选择项
* @param {*} info 用户信息 保存使用
*/
resetListLable(arr, selearr, info){
this.userInfo = info || {}
let plainOptions = []
arr.forEach((item, i) => {
if(item.title&&item.dataIndex&&item.dataIndex != 'action'){
item.id = item.dataIndex
item.key = '0-'+i
if(item.children && item.children.length>0){
item.disabled = true
item.children.forEach((itm,u)=>{
itm.id = itm.dataIndex ? itm.dataIndex : 'p-'+i +'-'+u
itm.key = '0-'+i +'-'+u
if(itm.children&&itm.children.length>0){
itm.disabled = true
itm.children.forEach((imt,ui)=>{
imt.id= imt.dataIndex ? imt.dataIndex : 'p-'+i +'-'+u+'-'+ui
imt.key = '0-'+i +'-'+u+'-'+ui
})
}
})
}
plainOptions.push(item)
}
});
this.plainOptions = plainOptions
let seletOption = []
if(selearr){
selearr.forEach(itm => {
if(itm.title&&itm.dataIndex&&itm.dataIndex != 'action'){
let objItem = itm.dataIndex
seletOption.push(objItem)
if(itm.children&&itm.children.length>0){
itm.children.forEach(itm2=>{
seletOption.push(itm2.dataIndex)
if(itm2.children&&itm2.children.length>0){
itm2.children.forEach(itm3=>{
seletOption.push(itm3.dataIndex)
})
}
})
}
}
});
}
this.checkedList = seletOption
},
//选择点击
checkNode(check, e){
this.checkedList = e.checkedNodes && e.checkedNodes.length>0 ? e.checkedNodes.map(x=>{return x.key}) : []
this.parentCheckNode(check, e)
},
// 判断是否选择父节点
parentCheckNode(check, e){
this.plainOptions.forEach((item,u)=>{
if(this.checkedList.indexOf(item.id) > -1) {
let isHaveParent = true
// 查子节点内是否
if(e.checked == false && item.children && item.children.length>0){
item.children.forEach((itm,b)=>{
if(this.checkedList.indexOf(itm.id) > -1) {
let isPHaveParent = true
if(e.checked == false && itm.children && itm.children.length>0){
itm.children.forEach(itm2=>{
if(this.checkedList.indexOf(itm2.id) > -1) {
isPHaveParent = false
return
}
})
if(isPHaveParent == true){
this.checkedList.splice(this.checkedList.indexOf(itm.id), 1)
return
}
} else {
isHaveParent = false
return
}
}
})
if(isHaveParent == true){
this.checkedList.splice(this.checkedList.indexOf(item.id), 1)
return
}
} else {
return
}
return
} else {
if(item.children && item.children.length>0){
item.children.forEach((itm,b)=>{
if(this.checkedList.indexOf(itm.id) > -1) {
this.checkedList.push(item.id)
return
} else {
if(itm.children&&itm.children.length>0){
itm.children.forEach((imt,ui)=>{
if(this.checkedList.indexOf(imt.id) > -1) {
this.checkedList.push(item.id)
this.checkedList.push(imt.id)
return
}
})
}
}
})
}
}
})
},
// 查看点击事件
selectNode(selectkey, e){
let node_eventKey = e.node.eventKey || ''
this.param = {
id: node_eventKey,
title: e.node.title || '',
}
this.selectKeys = [node_eventKey]
},
// 全选设置
onCheckAllChange(e){
let newList = []
if(e.target.checked){
this.plainOptions.forEach(item =>{
newList.push(item.dataIndex)
})
}
this.checkedList = newList
this.isCheckedAll()
},
// 判断是否全选
isCheckedAll(){
let isAll = false
isAll = this.checkedList.length == this.plainOptions.length ? true : false
this.indeterminate = isAll
this.checkAll = isAll
},
// 确认选中
sumbitOk(){
let extend = this.checkedList.join(',')
this.$emit('isSettingColumnsOk', this.checkedList)
this.$refs.vxePulldown.hidePanel()
this.Downtype = false
},
// 还原全选
sumbitReset(){
this.checkAll = true
let newList = []
this.plainOptions.forEach(item =>{
newList.push(item.dataIndex)
if(item.children && item.children.length>0){
item.children.forEach((itm,u)=>{
newList.push(itm.dataIndex)
if(itm.children&&itm.children.length>0){
itm.children.forEach((imt,ui)=>{
newList.push(imt.dataIndex)
})
}
})
}
})
this.checkedList = newList
let extend = this.checkedList.join(',')
this.$nextTick(() => {
this.$emit('isSettingColumnsOk', this.checkedList)
this.$refs.vxePulldown.hidePanel()
this.Downtype = false
})
},
}
}style 样式部分修改；
.toolbar-meta{
position: relative;
}
.downBox{
width: 220px;
position: relative;
overflow: hidden;
border: 1px solid #999;
border-radius: 4px;
.checkTopAll{
position: absolute;
top: 0;
left: 0;
border-bottom: 1px solid #999;
padding: 10px 5px;
width:100%;
background-color: #fff;
z-index: 999;
}
.checkItem{
position: relative;
width: 220px;
max-height:200px;
overflow:auto;
padding: 10px;
margin-bottom: 40px;
.checkLi{
display: block;
width: 100%;
}
.ant-checkbox-group-item{
display: block;
}
}
.downBtn{
position: absolute;
z-index: 999;
bottom: 0;
left: 0;
width: 100%;
padding: 5px 10px;
background: #fff;
border-top:1px solid #999;
.btnReset{
float: right;
}
}
}2、引用组件：setTableToolbar
补充，其他设置：初始执行设置被选项，已选项等；
this.$refs.setTableToolbar.resetListLable(this.defColumns, cols, info)
以上内容仅供参考，具体请根据实际情况选用；