element ui 提供的樹形控件默認是不支持添加圖標的,如下所示:
如果要想要在節點自定義樹形控件的圖標,可以使用slot-scope,代碼如下:
其代碼如下:
<!--
@author: itmacy
@desc: 自定義樹節點圖標
-->
<template>
<div>
<el-tree
:data="data"
:props="defaultProps"
@node-click="handleNodeClick">
<span slot-scope="{ node, data }">
<i v-if="data.children" class="el-icon-folder"></i>
<i v-else class="el-icon-collection-tag"></i>
<span style="margin-left: 10px">{{ node.label}}</span>
</span>
</el-tree>
</div>
</template>
<script>
export default {
data () {
return {
data: [{
label: '一級 1',
children: [{
label: '二級 1-1',
children: [{
label: '三級 1-1-1'
}]
}]
}, {
label: '一級 2',
children: [{
label: '二級 2-1',
children: [{
label: '三級 2-1-1'
}]
}, {
label: '二級 2-2',
children: [{
label: '三級 2-2-1'
}]
}]
}, {
label: '一級 3',
children: [{
label: '二級 3-1',
children: [{
label: '三級 3-1-1'
}]
}, {
label: '二級 3-2',
children: [{
label: '三級 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
handleNodeClick (data) {
console.log(data)
}
}
}
</script>
最終效果如下: