ElementUI tree的取值與回顯

ElementUI tree的取值與回顯

目的

場景一

選擇樹的節點後，但願提交當前選中的節點，以及節點對應的父級節點。 好比下面結構，當我選中字典管理時，我但願可以獲取到的ids = [1,2,3]

{
    "id": "1",
    "label": "資源",
    "type": "menu",
    "children": [
        {
            "id": "2",
            "label": "系統設置",
            "type": "menu",
            "children": [
                {
                    "id": "3",
                    "label": "字典管理",
                    "type": "menu",
                    "children": []
                },
                {
                    "id": "4",
                    "label": "公共配置",
                    "type": "menu",
                    "children": []
                }            
            ]
        }
    ]
}

場景二

回顯處理：將上述數據回顯時，默認狀況會選中全部，由於elementui的樹是根據父級的選中狀態自動選中全部子節點。

解決方案

場景一

思路

1. 提交時得到最底層的選中節點；
2. 能夠經過遍歷子節點，分別獲取父級節點標識；
3. 須要利用遞歸。

相關代碼

// 獲取徹底選中的節點
var treeKeys = this.$refs.tree2.getCheckedKeys()
// 最終選中的包括半選中的節點數組
var ids = []
// 調用獲取全部節點的方法 
this.getTreeNodes(treeKeys, ids)
// distinct 是自定義的數組去重方法
ids = this.distinct(ids)
var result = ''
if (ids && ids.length > 0) {
  result = ids.join(',')
}
// 逗號隔開的字符串
console.debug(result)

核心代碼以下

// 獲取選中的樹節點
getTreeNodes (childNodes, ids) {
    // 將全部選中的子節點保存
    for (var i = 0; i < childNodes.length; i++) {
      ids.push(childNodes[i])
      // 獲取父級節點
      this.getTreeParentNode(childNodes[i], ids)
    }
},
// 遞歸查詢全部上級數據
getTreeParentNode (id, ids) {
    // 獲取當前節點的上級節點id
    var parentId = this.$refs.tree2.getNode(id).parent.data.id
    if (parentId && parentId !== null) {
      ids.push(parentId)
      this.getTreeParentNode(parentId, ids)
    }
}

公共方法（去重）

export default {
  install (Vue, options) {
    /** js數組去重 @author GaoYuan */
    Vue.prototype.distinct = (arr) => {
      var res = []
      var json = {}
      for (var i = 0; i < arr.length; i++) {
        if (!json[arr[i]]) {
          res.push(arr[i])
          json[arr[i]] = 1
        }
      }
      return res
    }
  }
}

場景一

思路

• 利用樹的屬性 check-strictly

相關代碼

// 獲取權限樹
getTree () {
    this.treeLoading = true
    /** 將樹的父級與子級關聯移除 */
    this.checkStrictly = true
    // 開始請求接口
    this.$axios({
      method: 'get',
      url: '/sys/resource/listTree',
      params: {}
    })
    .then(res => {
        this.treeLoading = false
        this.$log('查詢結果', res)
        this.allResource = res
        /** 將樹的父級與子級關聯綁定 */
        this.checkStrictly = false
    })
    .catch(err => {
        this.treeLoading = false
        this.$log('錯誤信息', err)
    })
}

主要代碼是

/** 將樹的父級與子級關聯移除 */
this.checkStrictly = true
/** 將樹的父級與子級關聯綁定 */
this.checkStrictly = false

博客

https://my.oschina.net/gmarshal/blog/1843526

歡迎關注個人我的微信訂閱號：（聽說這個頭像程序猿專用）