el-tree树形控件自定义节点样式，动态添加icon图标

最新推荐文章于 2025-06-23 10:14:53 发布

神奇岁岁

最新推荐文章于 2025-06-23 10:14:53 发布

阅读量1.2w

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js css elementui

本文链接：https://blog.youkuaiyun.com/weixin_50255994/article/details/124952012

本文介绍了如何在Vue.js项目中，利用Element UI的el-tree组件实现自定义节点样式，包括动态添加图标。通过使用Slot来自定义树节点内容，并结合data和node参数来设置文字和图标的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先放element默认样式及代码：

需要实现的样式如下图：

这里提一下，动态添加图标使用的是 Slot 自定义树节点的内容,需要注意的是自定义树节点的内容，参数为 { node, data }

设置文字及图表样式可通过添加自定义类名设置

<!-- HTML片段 -->
<el-tree class="filter-tree" :data="data" node-key="id" :props="defaultProps" highlight-current default-expand-all :filter-node-method="filterNode" ref="tree" @node-click="handleNodeClick">
    <span slot-scope="{ node, data }" class="span__">
        <!-- <i class="el-icon-folder-opened"></i> -->
        <svg-icon v-if="data.icon" style="font-size: 16px; display: inline;" :icon-class="data.icon" />
        <span class="tree-node-span">{{ node.label }}</span>
    </span>
</el-tree>

<!-- JS部分片段 -->
<script>
  export default {
    data() {
      return {
        data: [{
            id: 2,
            icon: 'folder-blue',
            label: '文件夹一级标题 2',
            children: [{
              id: 5,
              icon: 'folder-blue-item',
              label: '文件夹二级标题 2-1'
            }, {
              id: 6,
              icon: 'folder-blue-item',
              label: '文件夹二级标题 2-2',
              children: [{
                id: 11,
                label: '三级 2-2-1'
              }, {
                id: 12,
                label: '三级 2-2-2'
              }],
           }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>

<!-- CSS片段 -->
// 设置节点行的高度
::v-deep.el-tree-node__content {
    height: 38px;
}
// 设置下拉图标位置
::v-deep.el-tree-node__expand-icon {
    position: absolute;
    right: 1%;
}
// 不使用slot自定义列表时label样式控制
::v-deep.el-tree-node__label {
    padding-left: 15px;
}