1、自定义节点（字体颜色、图标等）
image.png
官网提供了render-content和 scoped slot两种方法可对树节点内容自定义，使用render-content指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。使用 scoped slot 会传入两个参数node和data，分别表示当前节点的 Node 对象和当前节点的数据。以下的代码则采用的 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="'无数据！'">
<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、实现不同级别树节点的背景颜色自定义
image.png
如果再采用自定义节点的方式来修改背景颜色，会出现下图的问题，前面部分无法渲染颜色
image.png
分析过程：
1、首先console.log(this.$refs.tree)，不难发现，根本无法通过class来直接区分节点属于哪个级别，但是treeItems的数据是有序的，可以根据index来区分。
image.png
2、所以，我们首先要做的第一步是将树形结构的数据转换成list
/**
* 树转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;
},
/**
* 深度优先遍历树
* 一个递归方法
* @params tree:要转换的树结构数据
* @params list:保存结果的列表结构数据，初始传list = []
* @params parentId:当前遍历节点的父级节点id，初始为null(因为根节点无parentId)
**/
toListDF(tree, list, parentId) {
for (var i in tree) { // 遍历最上层
// 将当前树放入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
});
// 如果有子结点,再遍历子结点
if (node.children && node.children.length !== 0) {
this.toListDF(node.children, list, node.modelIndexId) // 递归
}
}
},
3、然后，我们可以从下图发现，从这里可以控制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'
}
})
})
