【vue】使用vue+element搭建項目，Tree樹形控件使用
1.依賴安裝
本例中，使用render-content進行樹節點內容的自定義，因此需要支持JSX語法。
在Git bash中運行一下指令
cnpm installbabel-plugin-syntax-jsxbabel-plugin-transform-vue-jsxbabel-helper-vue-jsx-merge-propsbabel-preset-es2015--save-dev
2.常用屬性
Attributes des 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 是否在點擊節點的時候展開或者收縮節點， boolean true
默認值為 true，如果為 false，
則只有點箭頭圖標的時候才會展開或者收縮節點。
lazy 是否懶加載子節點，需與 load 方法結合使用 boolean alse
load 加載子樹數據的方法，僅當 lazy 屬性為true 時生效 function(node, resolve) 無
Events
node-click 節點被點擊時的回調 共三個參數，
依次為：
傳遞給 data 屬性的數組中該節點所對應的對象、
節點對應的 Node、
節點組件本身。
3.應用：
3.1代碼
<el-tree node-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-checkbox node-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.23通過render-content方法定義樹節點內容
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 ( <span style="font-size: 14px; padding-right: 8px"> <span class="normalText"> {icon} <span style="color: #333;"> {node.label} </span> </span> {isshow ? ‘‘ : <span class="pos-a" style="right:20px; top:0;"> <span style="font-size: 12px;line-height: 30px;" on-click={() => this.operation(node, data, event)}> <icon-svg icon-style="icon-style" icon-class="el-icon-ifcn-gengduo"></icon-svg> </span> </span> } </span> ); }
3.24 :load="loadChildData" （load j加載子樹數據的方法，僅僅當lazy屬性為true時生效）
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.25 @node-click="handleNodeClick"
handleNodeClick(data, node, vuecomponent) {
console.log(‘data:‘, data,‘\n‘ ,‘node:‘, node, ‘\n‘, ‘vuecomponent‘,vuecomponent);
}
data:(當前選中節點的數據)
node: (node當前節點的信息,含當前節點的數據data(和上圖一致),父節點的信息parent)
3.25更新二級數據
this.$set(this.levelTwoDatas, ‘children‘, []);
this.levelTwoDatas.data.children = 接口數據；
3.26接口情況
第一次調接口的數據：
第2次調接口，樹節點數據（根據父節點的id,獲取子節點數據）
3.27頁面效果圖：
相關鏈接：http://element.eleme.io/#/zh-CN/component/tree
http://www.php.cn/js-tutorial-378333.html
【vue】使用vue+element搭建項目，Tree樹形控件使用