VUE+ Element-plus , el-tree 修改默认左侧三角图标，并使没有子级的那一项不展示图标

### Vue3 中自定义 Element Plus Tree 组件的展开/折叠图标 为了实现 `el-tree` 组件中的展开和折叠图标的自定义，在 Vue3 和 Element Plus 环境下，可以通过多种方式达成目标。 #### 使用 CSS 覆盖默认样式 通过覆盖 `.el-tree-node__expand-icon` 类来改变图标颜色或完全隐藏图标。当设置 `color: transparent;` 或者其他透明度属性时，可以让图标不可见[^1]： ```css <style> .el-tree-node__expand-icon { color: transparent; } </style> ``` 对于不同状态下的图标变化需求，可以利用伪类选择器进一步细化控制： ```css <style scoped> /* 默认状态下 */ .el-tree-node__expand-icon.expanded { background-image: url('path/to/custom-expanded-icon.png'); } /* 收缩状态下 */ .el-tree-node__expand-icon:not(.expanded) { background-image: url('path/to/custom-collapsed-icon.png'); } </style> ``` #### 动态绑定内联样式 如果需要更灵活地操作图标显示逻辑，可以在模板中动态绑定内联样式到 `<i>` 标签上，并配合 JavaScript 判断当前节点的状态从而切换对应的图标路径。 #### 定义空图标类名移除默认图标 另一种方法是在组件初始化时指定一个空白字符串作为 `iconClass` 属性值，以此消除原有的小三角形图标[^2]: ```html <template> <el-tree :data="treeData" :props="defaultProps" icon-class=" " /> </template> <script setup lang="ts"> import { ref } from 'vue'; const treeData = [ /* ... your data here... */ ]; const defaultProps = { children: 'children', label: 'label' }; </script> ``` #### 结合渲染函数定制化展示 还可以借助于 `render-content` 插槽来自由设计每个节点的内容布局，包括但不限于调整图标位置、替换为图片或其他 SVG 形状等复杂场景[^3]。 ```javascript // renderContent 方法用于构建树节点内容 function renderContent(h, { node }) { const isLeafNode = !node.data.children || node.data.children.length === 0; return h( 'span', {}, [ !isLeafNode && ( <i class={node.expanded ? 'custom-expanded-icon' : 'custom-collapsed-icon'}></i> // 自定义图标 ), <span>{node.label}</span>, ] ); } ``` 以上几种方案可以根据实际项目的需求选取最合适的解决方案来进行开发实践。