给树形控件的每个子节点前都添加小圆点,可以使用 Element UI 提供的插槽(slot)功能,通过插槽来自定义每个节点的内容。
如果节点的层级(level)大于 1,就显示小圆点,这样就不会在根节点前添加小圆点
<template>
<div>
<el-tree :data="treeData" :props="defaultProps">
<!-- 使用scoped slot自定义每个节点的内容 -->
<template v-slot:default="{ node, data }">
<span>
<!-- 添加小圆点样式 -->
<span v-if="node.level > 1" class="tree-dot"></span>
{{ data.label }}
</span>
</template>
</el-tree>
</div>
</template>
<style scoped>
/* 自定义的小圆点样式 */
.tree-dot {
display: inline-block;
width: 6px;
/* 圆点直径 */
height: 6px;
/* 圆点直径 */
border-radius: 50%;
background-color: #000;
/* 圆点颜色 */
margin-right: 5px;
/* 圆点与文本间距 */
}
</style>
<script>
export default {
data() {
return {
treeData: [
{
label: 'Level one 1',
children: [
{
label: 'Level two 1-1',
},
{
label: 'Level two 1-2',
},
{
label: 'Level two 1-3',
},
],
},
],
defaultProps: {
children: 'children',
label: 'label',
},
};
},
};
</script>