<template>
<el-tree
:data="data"
:props="defaultProps"
:render-content="renderContent"
accordion
/>
</template>
<script>
export default {
data() {
return {
data: [
{
label: 'Parent 1',
children: [
{
label: 'Child 1-1'
},
{
label: 'Child 1-2'
}
]
},
{
label: 'Parent 2'
},
{
label: 'Parent 3',
children: [
{
label: 'Child 3-1'
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
renderContent(h, { node, data }) {
return (
<span>
{node.isLeaf ? (
// No icon for leaf nodes
<span>{data.label}</span>
) : (
// Custom icon for nodes with children
<i class="el-icon-arrow-right" style="margin-right: 8px;"></i>
)}
{data.label}
</span>
)
}
}
}
</script>
<style scoped>
/* Custom icon styling, if needed */
.el-icon-arrow-right {
color: blue;
}
</style>