本次研究課題為：
el-tree如何在點擊父節(jié)點時全部選中所有子節(jié)點仪搔，點擊子節(jié)點時旋炒，父節(jié)點依然是選中狀態(tài)
這個功能在elementui中不予提供卓起，要自己寫
下面給小伙伴們提供一下思路和代碼
例如組織架構(gòu)樹形結(jié)構(gòu)
<el-tree
:data="data"
show-checkbox
default-expand-all
node-key="id"
ref="organizationTree"
highlight-current
@check="chooseDepartment"
:expand-on-click-node="false"
:check-strictly="true"
:props="defaultProps">
</el-tree>
chooseDepartment(checkedKeys,checkedData){
// 取消勾選
let [accessibleList,getCheckedKeys] = [this.accessibleList,this.$refs.organizationTree.getCheckedKeys()];
// 循環(huán)刪除this.accessibleList中的項
for(var i in accessibleList){
if(accessibleList[i].id == checkedKeys.id){
this.accessibleList.splice(i,1);
console.log(this.accessibleList);
return;
}
}
// 添加勾選
let [arr,newArr] = [[],this.$refs.organizationTree.getCheckedKeys()];
arr.push(checkedKeys);
function dealData(arr,newArr){
for(var i in arr){
newArr.push(arr[i].id);
dealData(arr[i].children,newArr);
}
}
// newArr代表獲取出來的當前節(jié)點以及其下的所有子節(jié)點的id
dealData(arr,newArr);
this.$refs.organizationTree.setCheckedKeys(newArr);
// newJsonArr代表所有選中的節(jié)點
let newJsonArr = this.$refs.organizationTree.getCheckedNodes();
this.accessibleList = newJsonArr;
console.log(this.accessibleList);
},
最后打印結(jié)果this.accessibleList是一個類數(shù)組對象
同學們可根據(jù)自己需要來獲取數(shù)組尚氛、對象寡键、逗號字符串等多種格式的數(shù)據(jù)
image.png
原創(chuàng)文章鏈接:https://www.toutiao.com/i6881556363982406152/
