1间坐、自定義節(jié)點(diǎn)（字體顏色潮尝、圖標(biāo)等）
image.png
官網(wǎng)提供了render-content和 scoped slot兩種方法可對(duì)樹(shù)節(jié)點(diǎn)內(nèi)容自定義，使用render-content指定渲染函數(shù)理茎，該函數(shù)返回需要的節(jié)點(diǎn)區(qū)內(nèi)容即可晤碘。渲染函數(shù)的用法請(qǐng)參考 Vue 文檔。使用 scoped slot 會(huì)傳入兩個(gè)參數(shù)node和data功蜓，分別表示當(dāng)前節(jié)點(diǎn)的 Node 對(duì)象和當(dāng)前節(jié)點(diǎn)的數(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="'無(wú)數(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、實(shí)現(xiàn)不同級(jí)別樹(shù)節(jié)點(diǎn)的背景顏色自定義
image.png
如果再采用自定義節(jié)點(diǎn)的方式來(lái)修改背景顏色求厕，會(huì)出現(xiàn)下圖的問(wèn)題著隆，前面部分無(wú)法渲染顏色
image.png
分析過(guò)程：
1扰楼、首先console.log(this.$refs.tree)，不難發(fā)現(xiàn)美浦，根本無(wú)法通過(guò)class來(lái)直接區(qū)分節(jié)點(diǎn)屬于哪個(gè)級(jí)別弦赖，但是treeItems的數(shù)據(jù)是有序的，可以根據(jù)index來(lái)區(qū)分浦辨。
image.png
2蹬竖、所以，我們首先要做的第一步是將樹(shù)形結(jié)構(gòu)的數(shù)據(jù)轉(zhuǎn)換成list
/**
* 樹(shù)轉(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); // 遍歷子樹(shù),并加入到list中.
}
}
return this.treeList;
},
/**
* 深度優(yōu)先遍歷樹(shù)
* 一個(gè)遞歸方法
* @params tree:要轉(zhuǎn)換的樹(shù)結(jié)構(gòu)數(shù)據(jù)
* @params list:保存結(jié)果的列表結(jié)構(gòu)數(shù)據(jù)流酬，初始傳list = []
* @params parentId:當(dāng)前遍歷節(jié)點(diǎn)的父級(jí)節(jié)點(diǎn)id币厕，初始為null(因?yàn)楦?jié)點(diǎn)無(wú)parentId)
**/
toListDF(tree, list, parentId) {
for (var i in tree) { // 遍歷最上層
// 將當(dāng)前樹(shù)放入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é)點(diǎn),再遍歷子結(jié)點(diǎn)
if (node.children && node.children.length !== 0) {
this.toListDF(node.children, list, node.modelIndexId) // 遞歸
}
}
},
3、然后芽腾，我們可以從下圖發(fā)現(xiàn)旦装，從這里可以控制style。
image.png
4摊滔、在掛載頁(yè)面時(shí)阴绢，等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'
}
})
})
