ElementUI 的 Tree 組件的基本使用實戰(zhàn)教程

更新時間：2022年12月09日 15:48:40 作者：一尾流鶯_

這篇文章主要介紹了ElementUI 的 Tree 組件的基本使用實戰(zhàn)教程,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

起因

事情是這樣的，項目最近有個需求。服務(wù)器有個圖片空間，說白了就是個文件夾。文件夾的結(jié)構(gòu)大家都知道，一層一層的。然后需要在前端以樹形展示。

具體的需求如下

可以新建子目錄，但是只能新建二級，三級的時候新建按鈕置灰。
在頁面上展示父級目錄名稱和當(dāng)前所在路徑，用 ‘/’ 分隔。
根目錄固定為圖片空間。
頁面首次打開的時候，請求接口，只返回一級目錄，默認展示所有一級目錄。
用戶點擊一級目錄，根據(jù)所點擊的一級目錄對應(yīng)的 id 請求接口返回二級目錄，以此類推。

我當(dāng)時看到這個需求的時候，心里想，這玩意我在 ElementUI 的官網(wǎng)見過，好說。結(jié)果當(dāng)我去開發(fā)的時候，發(fā)現(xiàn)還是挺復(fù)雜的，于是我就花了點時間了研究一下，以防下次用的時候忘了。

處理

先把 elementUI 的官方例子拷下來。然后又隨便添加了點內(nèi)容。

<template>
  <div>
    <el-input v-model="input"
              style="width:200px"
              placeholder="請輸入內(nèi)容"></el-input>

    <el-button type="primary">添加節(jié)點</el-button>

    <span>當(dāng)前目錄:</span>

    <span>當(dāng)前目錄的父級目錄:</span>

    <el-tree :data="data"
             :props="defaultProps"
             accordion
             @node-click="handleNodeClick"></el-tree>
  </div>
</template>
<script>
export default {
    data() {
    return {
      input: '',
      data: [{
        label: '圖片空間',
        children: [{
          label: '蔬菜',
          children: [{
            label: '菠菜',
          },
          {
            label: '生菜',
          },
          ],
        },
        {
          label: '水果',
          children: [{
            label: '香蕉',
          }],
        },
        {
          label: '美女',
          children: [{
            label: '秦嵐',
          }],
        }],
      }],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
  },
};
</script>

現(xiàn)在的界面是這樣的。

需求一

先從最簡單的開始吧。在任意目錄下添加分類（子節(jié)點）。

然后我們?nèi)タ次臋n怎么說。嗯，就是它了。

接收兩個參數(shù) (data, parentNode)

要追加的子節(jié)點的 data
子節(jié)點的 parent 的 data、key 或者 node

第一個參數(shù) data 在當(dāng)前的例子中就是一個名字而已。第二個參數(shù)要傳的東西怎么獲取呢？

要給目錄添加子節(jié)點，肯定要先點一下這個目錄，那我們看看點擊事件都能給我們返回什么東西。

可以看到第二個回調(diào)參數(shù)就是 節(jié)點對應(yīng)的node ，這不就有了么！那就來試一下。

修改代碼如下，我們點擊節(jié)點的時候，把點擊事件回調(diào)的參數(shù) node 先存在變量 nowClickNode 中，然后我們調(diào)用 append 方法的時候，再把 nowClickNode 給傳過去。

// 為了節(jié)省篇幅，省略template中的代碼，文末會貼出整體代碼
methods: {
    // 點擊節(jié)點
    handleNodeClick(nodes, node, self) {
      this.nowClickNode = node;
    },
    // 添加節(jié)點
    addSort() {
      const data = {
        label: '草莓',
      };
      this.$refs.tree.append(data, this.nowClickNode);
    },
  },

成功啦！

那么怎么實現(xiàn)只可以建二級目錄，三級的時候置灰呢，我們點擊的時候不是保存了一個變量 nowClickNode 么。
這個變量里面有個 level 屬性，代表的就是層級。我通過計算屬性來完成這個需求。

//template
<el-button type="primary"
           :disabled='isDisabled'
           @click='addSort'>添加節(jié)點</el-button>
//js
computed: {
    // 是否可以新建分類
    isDisabled() {
      if (this.nowClickNode.level > 2) {
        return true;
      }
      return false;
    },
  },

可以看到我們點擊到三級的時候按鈕就禁用了。

需求二

接下來我們實現(xiàn)第二個需求，顯示當(dāng)前所在路徑和父級目錄。這個示例圖看上面那張就可以了，已經(jīng)實現(xiàn)了。

// 點擊節(jié)點的時候觸發(fā)事件
handleNodeClick(nodes, node, self) {
  this.nowClickNode = node;
  this.nowPathArr = [];
  // 如果不是根節(jié)點
  if (node.parent.parent) {
    this.faterName = node.parent.data.label;
    // 遞歸找路徑
    this.findParentName(node);
    // 拼接路徑
    this.nowPath = `圖片空間 / ${this.nowPathArr.join(' / ')}`;
  } else {
  // 如果是根節(jié)點 直接賦值
    this.nowPath = '圖片空間';
    this.faterName = '- -';
  }
},

// 查找父節(jié)點的分類名稱
findParentName(node) {
  if (node.parent.parent) {
    this.nowPathArr.unshift(node.data.label);
    this.findParentName(node.parent);
  }
},

這個不知道怎么回事，我的根目錄也有 parent 屬性，所以只能再向上找一層，通過 parent.parent 存不存在來判斷是不是根節(jié)點。

我是在點擊的時候，遞歸查找點擊節(jié)點的父元素，然后把所有祖代元素放在數(shù)組里，最后進行拼接。

需求三,四,五

剩下的三個需求放在一起講，這個地方我練習(xí)的時候用的項目真實數(shù)據(jù)，不方便演示，代碼也是經(jīng)過脫敏處理的。重要的是知道怎么用就可以了。

//template
<el-tree 
     :data="treeData"  //數(shù)據(jù)源
     :props="defaultProps"  //配置項
     accordion //每次打開一個節(jié)點 手風(fēng)琴模式
     ref="tree" //用來獲取dom
     lazy  //節(jié)點懶加載
     :highlight-current='true' //高亮當(dāng)前節(jié)點
     :load='treeLoad' //懶加載時調(diào)用的方法
     node-key="cateId" //唯一標(biāo)識
     :default-expanded-keys='defaultOpen'  //默認打開的節(jié)點數(shù)組
     :expand-on-click-node='true' //是否在點擊節(jié)點的時候展開或者收縮節(jié)點， 默認值為 true，如果為 false，則只有點箭頭圖標(biāo)的時候才會展開或者收縮節(jié)點。
     @node-click="handleNodeClick" //點擊節(jié)點的回調(diào)函數(shù)
     >
</el-tree>

//js
// 加載樹形結(jié)構(gòu)  就是上面懶加載綁定的函數(shù)
treeLoad(node, resolve) {
  // 判斷節(jié)點等級
  if (node.level == 0) {
    // 如果是根節(jié)點,添加一個固定的圖片空間節(jié)點 這是實現(xiàn)需求三
    resolve([{
      cateName: '圖片空間',
      cateId: '0',
      children: [],
    }]);
  }
  // 不是根節(jié)點,調(diào)取接口加載列表 這里實現(xiàn)需求四，五的樹結(jié)構(gòu)懶加載，點完一級請求一級的數(shù)據(jù)
  if (node.level >= 1) {
    this.getCategoryListNew(node, resolve);
    // 防止子節(jié)點為空時一直出現(xiàn)加載動畫
    return resolve([]);
  }
},

// 獲取樹形結(jié)構(gòu)  上面掉用的請求接口 data處理完之后要調(diào)用resolve方法
getCategoryListNew(node, resolve) {
  Service.getCategoryListNew({ parentId: node.data.cateId }).then(({ data }) => {
      resolve(data);
  }).catch((e) => {
    console.log(e);
  });
},

其他知識點

另外記錄幾個知識點

默認展開節(jié)點

默認展開使用的是 :default-expanded-keys='defaultOpen' 屬性， defaultOpen 里面存放的是 node-key 的數(shù)組。

橫縱向滾動條

首先要給 tree 組件的外層添加 寬高 ，以及 overflow 屬性。然后要修改 el-tree 的屬性。

.tree-box{
  width: 200px;
  height: calc(100% - 30px);
  overflow:auto;
}
.el-tree {
  display: inline-block;
  min-width: 100%;
}

刷新某一個節(jié)點

// 通過節(jié)點id找到對應(yīng)樹節(jié)點對象
const node = this.$refs.tree.getNode(this.nodeId);
// 把loaded手動置為false,也就是告訴tree這個節(jié)點沒有加載過
node.loaded = false;
// 主動調(diào)用展開節(jié)點方法，重新查詢該節(jié)點下的所有子節(jié)點
node.expand();

模擬點擊一級目錄中第一個節(jié)點

// 選取dom
const root = document.querySelector('.el-tree-node__children');
// 找到目標(biāo)節(jié)點
const firstNode = root.firstChild;
// 模擬點擊
firstNode.click();

到此這篇關(guān)于ElementUI 的 Tree 組件的基本使用實戰(zhàn)教程的文章就介紹到這了,更多相關(guān)ElementUI 的 Tree 組件使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: