1、自定義節(jié)點（字體顏色、圖標(biāo)等）
image.png
官網(wǎng)提供了render-content和 scoped slot兩種方法可對樹節(jié)點內(nèi)容自定義，使用render-content指定渲染函數(shù)，該函數(shù)返回需要的節(jié)點區(qū)內(nèi)容即可。渲染函數(shù)的用法請參考 Vue 文檔。使用 scoped slot 會傳入兩個參數(shù)node和data，分別表示當(dāng)前節(jié)點的 Node 對象和當(dāng)前節(jié)點的數(shù)據(jù)。以下的代碼則采用的 scoped slot方法。
<el-tree
class="filter-tree"
ref="jportalFuncTreeRef"
:data="orgFuncTreeData"
node-key="id"
highlight-current
:props="{
children: 'children',
label: 'indexName',
}"
accordion
:expand-on-click-node="true"
:check-on-click-node="false"
:default-checked-keys="[]"
@node-click="treeNodeClick"
:filter-node-method="treeNodeFilter"
:empty-text="'無數(shù)據(jù)！'">
<span slot-scope="{ node, data }" class="slot-tree-node">
<span :class="data.category == 2 ? 'js-label-menu js-label' : 'js-label'">{{ node.label }}</span>
<span class="js-op-list">
<span class="js-op-item" @click.stop="funcTreeNodeDown(node, data)" title="下移">
<i class="el-icon-arrow-down primary"></i>
</span>
<span class="js-op-item" @click.stop="funcTreeNodeUp(node, data)" title="上移">
<i class="el-icon-arrow-up primary"></i>
</span>
<span class="js-op-item" @click.stop="funcTreeDel(node, data)" title="刪除">
<i class="el-icon-delete danger"></i>
</span>
</span>
</span>
</el-tree>
2、實現(xiàn)不同級別樹節(jié)點的背景顏色自定義
image.png
如果再采用自定義節(jié)點的方式來修改背景顏色，會出現(xiàn)下圖的問題，前面部分無法渲染顏色
image.png
分析過程：
1、首先console.log(this.$refs.tree)，不難發(fā)現(xiàn)，根本無法通過class來直接區(qū)分節(jié)點屬于哪個級別，但是treeItems的數(shù)據(jù)是有序的，可以根據(jù)index來區(qū)分。
image.png
2、所以，我們首先要做的第一步是將樹形結(jié)構(gòu)的數(shù)據(jù)轉(zhuǎn)換成list
/**
* 樹轉(zhuǎn)list
*/
treeToList(tree) {
for (var i in tree) {
var node = tree[i];
this.treeList.push({
parentId: null,
modelIndexId: node.modelIndexId,
modelIndexName: node.modelIndexName,
modelIndexCode: node.modelIndexCode,
grade: node.grade,
type: node.type,
weight: node.weight
})
if (node.children && node.children.length !== 0) {
this.toListDF(node.children, this.treeList, node.modelIndexId); // 遍歷子樹,并加入到list中.
}
}
return this.treeList;
},
/**
* 深度優(yōu)先遍歷樹
* 一個遞歸方法
* @params tree:要轉(zhuǎn)換的樹結(jié)構(gòu)數(shù)據(jù)
* @params list:保存結(jié)果的列表結(jié)構(gòu)數(shù)據(jù)，初始傳list = []
* @params parentId:當(dāng)前遍歷節(jié)點的父級節(jié)點id，初始為null(因為根節(jié)點無parentId)
**/
toListDF(tree, list, parentId) {
for (var i in tree) { // 遍歷最上層
// 將當(dāng)前樹放入list中
var node = tree[i];
list.push({
parentId: parentId,
modelIndexId: node.modelIndexId,
modelIndexName: node.modelIndexName,
modelIndexCode: node.modelIndexCode,
grade: node.grade,
type: node.type,
weight: node.weight
});
// 如果有子結(jié)點,再遍歷子結(jié)點
if (node.children && node.children.length !== 0) {
this.toListDF(node.children, list, node.modelIndexId) // 遞歸
}
}
},
3、然后，我們可以從下圖發(fā)現(xiàn)，從這里可以控制style。
image.png
4、在掛載頁面時，等DOM加載完，遍歷list即可
this.$nextTick(() => {
treeList.find((item, index) => {
// console.log(item.grade,item.modelIndexName,index)
if (item.grade === 1) {
this.$refs.tree.treeItems[index].style.backgroundColor = 'rgba(220, 229, 254, 1)'
} else if (item.grade === 2) {
this.$refs.tree.treeItems[index].style.backgroundColor = 'rgba(249, 249, 249, 1)'
} else if (item.grade === 3) {
this.$refs.tree.treeItems[index].style.backgroundColor = 'white'
}
})
})
