vue-treeselect及el-tree點擊節(jié)點獲取上級節(jié)點的數(shù)據(jù)方式

更新時間：2023年07月19日 15:25:37 作者：花椒和蕊

這篇文章主要介紹了vue-treeselect及el-tree點擊節(jié)點獲取上級節(jié)點的數(shù)據(jù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue-treeselect及el-tree點擊節(jié)點獲取上級節(jié)點的數(shù)據(jù)

el-tree，單擊和右擊都有一個參數(shù)，即節(jié)點對應(yīng)的Node

在這里插入圖片描述

打印這個Node，如下：

    @node-contextmenu="rightClick"
    // 節(jié)點右擊事件 */
    rightClick(MouseEvent, object, Node, element) {
      console.log(Node, "Node"); 
    },

在這里插入圖片描述

展開parent

在這里插入圖片描述

這個parent就是父節(jié)點，父節(jié)點中還包含了它自己的父節(jié)點，如果無父節(jié)點，返回null

el-tree獲取父節(jié)點還是挺簡單的，樹組件內(nèi)部已經(jīng)返給你了，直接獲取就行

vue-treeselect獲取父節(jié)點

文檔中未找到直接獲取的方法，我這里說一下自己實現(xiàn)的方式

 @select="(node) => treeHandleSelect(node)"

  treeHandleSelect(node, e) {  
      // 獲取節(jié)點上一節(jié)點
      //this.expendTree樹數(shù)據(jù)源，node.pid當前節(jié)點的父id，this.dealPartytree處理數(shù)據(jù)的方法
      const obj = this.dealPartytree(this.expendTree, node.pid);
      //obj就是處理完后返的父節(jié)點，然后直接拿自己需要的東西即可
      this.partymember.branch = obj.name;
      this.partymember.branchId = obj.id;
    },

把樹數(shù)據(jù)源，節(jié)點的父id傳進來

    // 獲取節(jié)點上一節(jié)點
    dealPartytree(arr, id) {
      let obj = {};
      const dep = (data, nodeId) => {
      //循環(huán)樹數(shù)據(jù)源，用當前項的id和父id對比，相同就賦值，不相同就遞歸，相當于遍歷了整棵樹
        for (let v = 0; v < data.length; v++) {
          if (data[v].id === nodeId) {
            obj = data[v];
          } else if (data[v].children) {
            dep(data[v].children, nodeId);
          }
        }
        return obj;
      };
      obj = dep(arr, id);
      return obj;
    },

//用當前項的id和父id對比是因為，當前項的父id即父節(jié)點的id，通過父節(jié)點的id進行關(guān)聯(lián)

在這里插入圖片描述

vue-treeselect無法點擊問題（點擊無法出現(xiàn)拉下菜單）

問題原因

樣式?jīng)_突（使用了elementui）

場景

在el-form標簽中，如果使用了標簽，并且父標簽不是的話，就會出現(xiàn)無法點擊的問題。（沒有嚴格按elementui的標簽嵌套）

可正常點擊：

<el-row>
? ?<el-col :span="24" ?v-if="form.parentId !== 0">
? ? ?<el-form-item ? label="上級字典" prop="parentId">
? ? ? ?<treeselect v-model="parentId" :options="dictOptions" ?/>
? ? ?</el-form-item>
? ?</el-col>
?</el-row>

不能正常點擊：

<el-col :span="24" >
? <el-form-item ? label="上級字典" prop="parentId">
? ? <treeselect v-model="parentId" :options="dictOptions" ?/>
? </el-form-item>
</el-col>

其他場景下，應(yīng)該也是樣式?jīng)_突的問題。