el-tree 饿了么树状控件自定义节点的显示图标

• 效果展示
• 实现代码
• • 替换小三角为图标

效果展示

el-tree组件默认显示时，节点是不带icon的，如需使用时，可以通过自定义插槽的方式来实现，实现方式在网络上也存在很多，本篇只简单记录个人如何实现。

功能点：

• 替换默认显示的小三角图标
• 展开即关闭节点时图标切换
• 子节点的默认显示图标

实现代码

<template>
  <div class="tree">
    <el-tree
      :data="data5"
      node-key="id"
      default-expand-all
      @node-expand="handlerNodeExpand"
      show-checkbox
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>
          <!-- <i :class="data.icon"></i> -->
          <i
            v-if="data.children.length!==0"
            :class="[
            node.expanded ? 'el-icon-folder-remove': 'el-icon-folder-add'
          ]"
          ></i>
          <i v-if="data.children.length===0" class="el-icon-document"></i>
          {{ node.label }}
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  name: 'customIconTree',
  data () {
    return {
      data5: [{
        id: 1,
        label: '一级节点 1',
        icon: 'el-icon-success',
        children: [{
          id: 4,
          label: '二级节点 1-1',
          icon: 'el-icon-folder-add',
          children: [{
            id: 9,
            label: '三级节点 1-1-1',
            icon: 'el-icon-info',
            children: [
              {
                id: 13,
                label: '三级节点 1-1-1-1',
                children: []
              }
            ]
          }, {
            id: 10,
            label: '三级节点 1-1-2',
            children: []
          }]
        }]
      },
      {
        id: 2,
        label: '一级节点 2',
        children: [{
          id: 5,
          label: '二级节点 2-1',
          children: []
        }, {
          id: 6,
          label: '二级节点 2-2',
          children: []
        }]
      },
      {
        id: 3,
        label: '一级节点 3',
        children: [{
          id: 7,
          label: '二级节点 3-1',
          children: []
        }, {
          id: 8,
          label: '二级节点 3-2',
          children: []
        }]
      },
      {
        id: 12,
        label: '一级节点-4',
        children: []
      }
      ],
      expandNodes: false
    }
  },
  methods: {
    handlerNodeExpand (data, node, element) {
      window.console.log(data)
      window.console.log(node)
      window.console.log(element)
    }
  }

}
</script>

<style scoped>
.tree >>> .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.tree >>> .el-icon-caret-right:before {
  content: "\e6d9";
  color: white;
  background-color: #dcdfe6;
}
.tree >>> .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  content: "\e6d8";
  color: white;
  background-color: #dcdfe6;
}
.tree >>> .el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
  background-color: transparent;
}
.tree >>> .el-tree-node__content > label.el-checkbox {
  margin-bottom: 2px;
}
</style>

           

实现解释：

通过自定义插槽的方式，在数据渲染时添加i标签，从而显示图标

通过el-tree通过的节点展开时间，在控制台输出data、node、element后可以观察发现，当点击展开节点时，node中存在一个expanded参数且值为 true：

考虑到组件封装，如果在style中将图标写死，若是想改变图标，势必会影响其他地方的显示，故绑定了icon容器span 的class属性，通过node.expanded属性来动态的改变icon的class属性，后续只需将目前写的class替换为属性，供使用者使用时按自己的需求进行绑定即可。

替换小三角为图标

将默认的小三角图标替换为自己需要的图表，这里使用的是style的方式，通过控制台查看element，找到所在的元素，然后为其设置css样式，具体参见上述完整代码。

  tips:

   点滴记录，汇聚江河