最簡單的自定義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 展開的節點都會帶有這個屬性
圖標換成自己想要的即可

 

 

 上面的樣式存在一個過渡的效果，如果是文件夾形式的圖標存在過渡效果不合適，這兩個樣式重寫覆蓋即可

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