在Vue2中,el-tree组件的页面节点前三角符号仅在有下级节点时显示
在 Vue2 中使用 Element UI 的 el-tree
组件时,默认情况下,即使没有子节点的节点也会显示一个可折叠的三角符号。如果你想要隐藏没有子节点的三角符号,可以通过自定义节点的内容来实现。
下面是一个简单的示例,展示如何使用 el-tree
组件,并通过 render-content
属性来自定义节点的内容,从而控制三角符号的显示:
<template>
<el-tree
:data="treeData"
:props="defaultProps"
show-checkbox
node-key="id"
default-expand-all
:render-content="renderContent"
>
</el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: '节点1',
children: [
{
id: 4,
label: '子节点1-1'
}
]
},
{
id: 2,
label: '节点2'
},
{
id: 3,
label: '节点3',
children: [
{
id: 5,
label: '子节点3-1'
},
{
id: 6,
label: '子节点3-2'
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
renderContent(h, { node, data, store }) {
if (node.isLeaf) {
// 如果是叶子节点,不显示三角符号
return h('span', {}, node.label);
} else {
// 如果不是叶子节点,正常显示
return h('span', {}, [
h('i', { class: 'el-icon-caret-right' }),
h('span', {}, node.label)
]);
}
}
}
};
</script>
在这个示例中,renderContent
方法是一个函数,它接受两个参数:h
(createElement 函数)和节点相关的对象。我们检查节点是否是叶子节点(node.isLeaf
),如果是,则直接返回一个包含节点标签的 span
元素;如果不是,则返回一个包含三角符号和节点标签的 span
元素。
这样,没有子节点的节点就不会显示三角符号了。注意,这里使用的是 Element UI 的图标类 el-icon-caret-right
来表示三角符号,如果你不希望显示这个图标,可以简单地省略它。