前言
我们在项目中经常需要通过树形结构展示数据,树形结构前默认为小三角图标,有时候需要进行修改,这就需要我们去自定义了
1.e-tree默认情况
其实我觉得这个小三角挺好看的,但是老大要求改我也没办法.
2.查element官网
根据官网提供的属性进行修改,结果是所有包含子部门的都显示图标,没有子部门的不显示图标,明显不符合要求.
为了解决以上情况,我只能设置属性如下(icon-class=" "双引号之间要有空格),把树形控件图标隐藏.
然后在你要加图标的数据前面设置代码就可已实现了
<i v-if="data.children.length!==0" :class="node.expanded ? 'el-icon-remove' : 'el-icon-circle-plus'" />
<i v-else class="el-icon-user-solid" />
这里的node包含了树形控件展开和隐藏的信息expanded,记得先在作用域插槽里面定义slot-scope="{ data,node }",你也可以在vue的调试工具中看到这个信息
最后
希望整理的信息对您有所帮助,喜欢的话请帮忙点赞
如果有什么建议,欢迎在评论区留言
不足之处还请批评指教,谢谢!
(图片来源于网络,如侵删)
