最简单的自定义element ui tree组件展开收起图标方法

要自定义tree组件展开折叠图标，最简单的办法莫过于直接改css，无需写复杂的DOM结构，如下

<el-tree :data="data" icon-class="icon-tree" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

/deep/ .icon-tree {
			margin: 0  5px 0 10px;
			position: relative;
			background: url('../../assets/tree_icon/plus.png');
			background-size: 100% 100%;
		}
		/deep/ .expanded{
			background: url('../../assets/tree_icon/minus-portrait.png');
			background-size: 100% 100%;
		}
		/deep/ .is-leaf{
			background-image: none;
			background-size: 100% 100%;
		}

icon-class用于废掉默认图标
is-deaf 无子节点的DOM都会有这个class
expanded 展开的节点都会带有这个属性
图标换成自己想要的即可

最简单的自定义element ui tree组件展开收起图标方法

上面的样式存在一个过渡的效果，如果是文件夹形式的图标存在过渡效果不合适，这两个样式重写覆盖即可

/deep/ .el-tree-node__expand-icon {
			transform: initial;
			transition: auto;
		}

最简单的自定义element ui tree组件展开收起图标方法

相关推荐