el-tree 实现全选、反选、子选父功能

html部分

:data="menuList"

:props="menuListTreeProps"

node-key="permId"

:accordion="true"

ref="menuListTree"

:check-strictly="trueFlag"

:default-expand-all="true"

:default-checked-keys="checkKeys"

@check-change="checkChange"

@check="currentChecked"

show-checkbox>

 

data部分

data () {

return {

menuList: [],

treeNewArr: [],

disabledTrue: true,

chekedKeys: [],

treeData: [],

trueFlag: true,

editCheckId: '',

checkKeys: [],

menuListTreeProps: {

label: 'permName',

children: 'sub',

// disabled: 'hasperm'

},

 

js 部分

 

currentChecked(data, currentChecked){

if(data.hasPerm){

let auth = []

const { checkedNodes, halfCheckedNodes } = currentChecked

data.sub.length && data.sub.forEach(({ permId }) => {

auth.push({

permId

})

})

halfCheckedNodes.length && halfCheckedNodes.forEach(({ permId }) => {

auth.push({

permId

})

})

checkedNodes.length && checkedNodes.forEach(({ permId }) => {

auth.push({

permId

})

})

this.opetation(auth);

}

},

opetation (auth) {

const arr = []

auth.length &&auth.map(({ permId }) => {

arr.push(permId)

})

this.$nextTick(function() {

console.log('arr',arr)

this.$refs.menuListTree.setCheckedKeys(arr)

})

},

checkChange(item, isCheck, isChildCheck){

item.hasPerm = isCheck;

if(isCheck){

this.travalTree(this.menuList[0]);

}else{

item.sub.forEach(i=>{

i.hasPerm = false;

this.$refs.menuListTree.setChecked(i, false);

}

)

}

},

travalTree(tree)

{

tree.sub.forEach(i=>{

this.travalTree(i);

if(i.hasPerm) {

tree.hasPerm = true;

this.$refs.menuListTree.setChecked(tree, true);

}

})

},

 

getTreeRole(){

let _this = this;

treeApi({

roleId: this.roleId

}).then(res => {

if(res.data.code == 200){

let treeData = [];

this.checkKeys = [];

treeData.push(res.data.data.root);

flatten(treeData).forEach(el =>{

if(el.hasPerm){

this.checkKeys.push(el.permId);

}

})

this.menuList = treeData;

}

})

},