IT评测·应用市场-qidao123.com技术社区

标题: VUE+ Element-plus , el-tree 修改默认左侧三角图标，并使没有子级的那一项 [打印本页]

作者: 南七星之家 时间: 2025-1-22 23:32
标题: VUE+ Element-plus , el-tree 修改默认左侧三角图标，并使没有子级的那一项
<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>

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)