用element的樹形控制元件實現許可權管理的時候碰到一個問題,當一項大許可權節點下的小許可權節點被選中時,大節點屬於半選狀態,但是最後輸出的結果不包含大節點的id 這樣會導致兩個問題

• 首先第一次選擇時,傳給後端的許可權列表不包含大的許可權id
• 回顯時,如果包含了大的許可權時,會直接將大許可權下的所有子許可權都選中

這樣和我們的需求是完全不一樣的, 看過文件也沒有可配置的解決方法.然後我自己花了點時間用遍歷+遞迴的方法解決了 雖然比較麻煩但是最終解決了問題,實現過程如下

  //該部分是將半選狀態下的父節點加入id陣列中
//樹形控制元件
<el-tree
    :data="list"
    show-checkbox
    node-key="id"
    ref="tree"
    highlight-current
    :props="defaultProps">
</el-tree>


//提交是把擁有子節點的父許可權加入id陣列

var arr  = this.$refs.tree.getCheckedKeys()
var array = []
for(var i = 0;i < arr.length;i++) {
   fun(arr[i],this.list,array)
}
function noRepeat(arr,value) { //id去重
    for(var i = 0;i < arr.length;i++) {
       if(arr[i] == value){
           return false
        }
 }
 return true
 }
 function fun(value,data,arr) {   //通過查詢父節點下是否右子節點 將半選狀態的父節點加入陣列中
 for( var i  = 0;i < data.length;i++){
 	var mod = data[i]
 	if(mod.id == value) {
 		if(noRepeat(arr,mod.id)) {
 			arr.push(mod.id)
 		}
 		return true;
 }else {
 	if(mod.child) {
	 	var bool = fun(value, mod.child, arr)
 		if(bool) {
 			if (noRepeat(arr, mod.id)) {
 				arr.push(mod.id)
			 }
 		return true
 	}
 }
}
 }
  return false
}

------------------------------------------------------
//以下部分是回顯時,將只有部分選擇子節點的父節點剔除

 var arr = this.permissionIds
        var array = []
        function fun(value,data,arr) {
          for( var i  = 0;i < data.length;i++){
            var mod = data[i]
            if(mod.id == value) {
              if(mod.child.length == 0){
                arr.push(mod.id)
                return true
              }
            return true
            }else {
              mod.child.id
              if(mod.child.length != 0) {
                fun(value, mod.child, arr)
              }
            }
          }
          return true
        }
        for(var i = 0;i < arr.length;i++) {
          fun(arr[i],this.list,array)
        }
        this.permissionIds = array
 

基本實現就是這樣 ,因為寫的比較晚,細節有點忘了 .寫起來比較麻煩,思路挺簡單的.