（一）自定義圖標(biāo)
在element-ui 官網(wǎng)中孔庭，提供了兩種方法: render 和 slot 來(lái)添加自定義節(jié)點(diǎn)內(nèi)容，可以在節(jié)點(diǎn)區(qū)添加按鈕或圖標(biāo)等。
<el-tree ref="tree" :data="treeData" show-checkbox :check-strictly="true" node-key="code" highlight-current :props="defaultProps" @check="handleTreeCheck" @node-click="handleNodeClick">
<span class="slot-t-node" slot-scope="{ node, data }">
<i :class="{ 'fa fa-folder': !node.expanded, 'fa fa-folder-open':node.expanded}" style="color: #fcd568;" />
<span>{{ node.label }}</span>
</span>
</el-tree>
（二）實(shí)現(xiàn)單選節(jié)點(diǎn)功能
這里的單選功能孕讳，只不過(guò)設(shè)置節(jié)點(diǎn)時(shí)铅协，將原來(lái)選中的節(jié)點(diǎn)再次覆蓋捷沸，達(dá)到了單選的功能。
（1）通過(guò) @node-click 事件（節(jié)點(diǎn)被點(diǎn)擊時(shí)的回調(diào)）狐史，設(shè)置選中的節(jié)點(diǎn)：
// 監(jiān)聽(tīng)樹(shù)點(diǎn)擊事件
handleNodeClick(data, checked, node) {
console.log(data, checked , node)
if (checked === true) {
this.$emit('select-tree', data)
this.$refs.tree.setCheckedNodes([data])
}
},
（2）通過(guò) @check-change 事件（節(jié)點(diǎn)選中狀態(tài)發(fā)生變化時(shí)的回調(diào)）痒给，設(shè)置選中的節(jié)點(diǎn)：
// 監(jiān)聽(tīng)樹(shù)選擇事件
handleTreeCheck(data, checked) {
console.log(data, checked)
this.$emit('select-tree', data)
this.$refs.tree.setCheckedNodes([data])
},
（3）為何調(diào)用兩個(gè)事件，做相同操作：
@check-change 事件 主要是用戶(hù)點(diǎn)擊自定義圖標(biāo)前的選擇框進(jìn)行的操作骏全，而 @node-click 事件苍柏，點(diǎn)擊節(jié)點(diǎn)（包括圖標(biāo)和文字）進(jìn)行的操作。
image.png
