當前位置：首頁 > 前端技术 > vue >内容正文

vue

【vue】使用vue+element搭建项目，Tree树形控件使用

發布時間：2025/4/5 vue 67 豆豆

生活随笔收集整理的這篇文章主要介紹了【vue】使用vue+element搭建项目，Tree树形控件使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?目錄

一、安裝依賴
二、常用屬性、事件
三、demo應用　　
- html代碼
- 屬性用法
  - 3.2.1 :default-expanded-keys(默認展開項)
  - 3.2.2 :props="defaultProps" 用法
  - 3.2.3? 通過render-content方法定義樹節點內容(js代碼)
  - 3.2.4?:load="loadChildData" （load 加載子樹數據的方法，僅僅當lazy屬性為true時生效）(js代碼)
  - 3.2.5?@node-click="handleNodeClick"
  - 3.2.6 更新二級數據
  - 3.2.7 接口情況
  - 3.2.8 頁面效果圖：

一、安裝依賴

本例中，使用render-content進行樹節點內容的自定義，因此需要支持JSX語法。(見參考資料第3個)

在Git bash中運行一下指令 cnpm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-preset-es2015\ --save-dev

?二、常用屬性、事件

常用屬性

Attributes(屬性名)	描述	type(類型)	default(默認值)
node-key	每個樹節點用來作為唯一標識的屬性，整棵樹應該是唯一的	string	無
default-expanded-keys	默認展開的節點的key的數組	array	無
auto-expand-parent	展開子節點的時候是否自動展開父節點	boolean	true
props	配置選項	object	無
render-content	樹節點的內容區的渲染Function	Function(h,{node,data,store})	無
highlight-current	是否高亮當前選中節點	boolean	false
expand-on-click-node	是否在點擊節點的時候展開或者收縮節點，默認值為 true，如果為 false 則只有點箭頭圖標的時候才會展開或者收縮節點。	boolean	true
lazy	是否懶加載子節點，需與 load 方法結合使用	boolean	false
load	加載子樹數據的方法，僅當 lazy 屬性為true 時生效	function(node, resolve)	無

Events(事件)

事件名稱

描述

回調參數

node-click

節點被點擊時的回調

共三個參數，依次為：傳遞給?data?屬性的數組中該節點所對應的對象、節點對應的 Node、節點組件本身。

三、demo應用：

3.1 html代碼

<el-treenode-key="id" :default-expanded-keys="[0]" //0對應下方①:auto-expand-parent="true":props="defaultProps" :render-content="renderContent" :highlight-current="true" :expand-on-click-node="false"lazy :load="loadChildData" @node-click="handleNodeClick"> </el-tree>

?ps:

本例中點擊節點箭頭時才展開子級節點，執行loadChildData操作，選中節點（并非箭頭）時才執行handleNodeClick操作
?將tree的某些節點設置為默認展開時，需要設置　default-expanded-keys　和　node-key，兩者缺一不可。其中node-key的值為節點數據中的一個字段名，該字段在整棵樹中是唯一的。

例如：node-key="id",

其中default-expanded-keys的值為數組，其值為展開項的id。比如：:default-expanded-keys="[2, 3]"
?lazy 需要和load結合使用，本例中采用懶加載，動態加載節點數據的方法加載數據
會調2次接口，第一次接口為第一級數據，第二次為第一級的child數據，此結果于
:default-expanded-keys="[0]" ， lazy :load="loadChildData"這是三個屬性有關

3.2應用中用到的屬性用法

3.2.1 ? ? :default-expanded-keys(默認展開項)

<el-tree:data="data2"show-checkboxnode-key="id":default-expanded-keys="[2, 3]":default-checked-keys="[5]":props="defaultProps"> </el-tree><script>export default {data() {return {data2: [{id: 1,label: '一級 1',children: [{id: 4,label: '二級 1-1',children: [{id: 9,label: '三級 1-1-1'}, {id: 10,label: '三級 1-1-2'}]}]}, {id: 2,label: '一級 2',children: [{id: 5,label: '二級 2-1'}, {id: 6,label: '二級 2-2'}]}, {id: 3,label: '一級 3',children: [{id: 7,label: '二級 3-1'}, {id: 8,label: '二級 3-2'}]}],defaultProps: {children: 'children',label: 'label'}};}}; </script>

default-expanded-keys（默認展開的節點）效果圖

3.2.2? :props="defaultProps" 用法

:props="defaultProps"?
defaultProps: {children: 'children',label: 'title',},

3.2.3通過render-content方法定義樹節點內容(js代碼)

renderContent(h, { node, data, store }) {let icon;let platForm;
let isShow = false;if(platForm == 0){icon = （ <icon-svg icon-style="icon-style" icon-class="el-icon-pc"></icon-svg>）;
　　　　　isShow = true;　}else{icon = （ <icon-svg icon-style="icon-style" icon-class="el-icon-wx"></icon-svg>）;
　　　　　isShow = false;}return ({icon} {node.label} {isshow ? '' : this.operation(node, data, event)}><icon-svg icon-style="icon-style" icon-class="el-icon-ifcn-gengduo"></icon-svg>}); }

3.2.4?:load="loadChildData" （load 加載子樹數據的方法，僅僅當lazy屬性為true時生效）(js代碼)

loadChildData(node, resolve) {
......接口調用
resolve(接口數據);//內容更新 //第一級為選中并執行node-click操作 if (node && node.level == 0){ this.levelTwoDatas = node.childNodes[0]; this.$nextTick(function () {// let obj= document.getElementsByClassName('el-tree-node__content')[0]; obj.click(); }) } },

node:

?3.2.5?@node-click="handleNodeClick"

handleNodeClick(data, node, vuecomponent) {console.log('data:', data,'\n' ,'node:', node, '\n', 'vuecomponent',vuecomponent); }

data:(當前選中節點的數據)

node: (node當前節點的信息,含當前節點的數據data(和上圖一致),父節點的信息parent)

?3.2.6更新二級數據

this.$set(this.levelTwoDatas, 'children', []); this.levelTwoDatas.data.children = 接口數據；

3.2.7接口情況

第一次調接口的數據：

第2次調接口，樹節點數據（根據父節點的id,獲取子節點數據）

3.2.8頁面效果圖：

?相關資料：

?http://element.eleme.io/#/zh-CN/component/tree
?http://www.php.cn/js-tutorial-378333.html
?https://blog.csdn.net/u014628388/article/details/76099812

轉載于:https://www.cnblogs.com/websmile/p/8268853.html

總結

以上是生活随笔為你收集整理的【vue】使用vue+element搭建项目，Tree树形控件使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。