vue使用element树形组件 如何修改树形组件图标 让展开和收缩显示不同的图标

如何修改树形组件前的svg图标

成品效果图

vue使用element树形组件 如何修改树形组件图标 让展开和收缩显示不同的图标_第1张图片

代码实现

使用树形组件中的作用域插槽 让scope接收参数对象 打印scope得知 如图1 expanded属性展开的时候为true 收缩的时候为false
v-if判断还有没有子项

图1
vue使用element树形组件 如何修改树形组件图标 让展开和收缩显示不同的图标_第2张图片

//树形组件中的作用域插槽

审查元素得知

vue使用element树形组件 如何修改树形组件图标 让展开和收缩显示不同的图标_第3张图片

<span class="expanded el-tree-node__expand-icon el-icon-caret-right">span>
小三角是由这个元素做的 给其中某个类添加白色 让小三角不出现

代码如下
<style>
  .el-tree-node__expand-icon {
    color: #fff;
}   
style>[

效果图到顶部观看

你可能感兴趣的:(element,vue,vue,elementui,svg,javascript)