el-tree：如何实现自定义节点或者整体背景颜色自定义

1、自定义节点（字体颜色、图标等）

image.png

                <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'
        }
      })
    })

总结：应该有更好更合适的方法，本人不太推荐使用这种方法，有点麻烦，期待有人能分享交流一下其他的实现方式。