快捷導(dǎo)航

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

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

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

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

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

在這里插入圖片描述

打印這個(gè)Node，如下：

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

在這里插入圖片描述

展開parent

在這里插入圖片描述

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

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

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

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

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

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

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

    // 獲取節(jié)點(diǎn)上一節(jié)點(diǎn)
    dealPartytree(arr, id) {
      let obj = {};
      const dep = (data, nodeId) => {
      //循環(huán)樹數(shù)據(jù)源，用當(dāng)前項(xiàng)的id和父id對比，相同就賦值，不相同就遞歸，相當(dāng)于遍歷了整棵樹
        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;
    },

//用當(dāng)前項(xiàng)的id和父id對比是因?yàn)?，?dāng)前項(xiàng)的父id即父節(jié)點(diǎn)的id，通過父節(jié)點(diǎn)的id進(jìn)行關(guān)聯(lián)

在這里插入圖片描述

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

問題原因

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

場景

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

可正常點(diǎn)擊：

<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>

不能正常點(diǎn)擊：

<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)_突的問題。