vue tree得最后一个节点得label设置颜色为红色
时间: 2024-02-18 21:05:50 浏览: 60
可以通过以下方式为 Vue Tree 中的最后一个节点设置 label 颜色为红色:
```html
<template>
<div>
<div class="tree">
<tree-node :node="root" />
</div>
</div>
</template>
<script>
import TreeNode from './TreeNode.vue';
export default {
components: {
TreeNode,
},
data() {
return {
root: {
label: 'Root',
children: [
{
label: 'Child 1',
children: [
{
label: 'Grandchild 1.1',
},
{
label: 'Grandchild 1.2',
},
],
},
{
label: 'Child 2',
children: [
{
label: 'Grandchild 2.1',
},
{
label: 'Grandchild 2.2',
},
],
},
{
label: 'Child 3',
children: [
{
label: 'Grandchild 3.1',
},
{
label: 'Grandchild 3.2',
},
{
label: 'Grandchild 3.3',
},
],
},
],
},
};
},
};
</script>
<style>
.tree {
margin: 0;
padding: 0;
}
.tree-node {
list-style: none;
margin-left: 1em;
position: relative;
}
.tree-node::before {
content: '';
position: absolute;
top: -0.4em;
left: -1em;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
height: 1em;
}
.tree-node::after {
content: '';
position: absolute;
top: -0.4em;
left: -1em;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
height: 1em;
}
.tree-node:last-child::before {
border-left: none;
}
.tree-node:last-child::after {
border-left: none;
}
.tree-node .label {
display: inline-block;
padding: 0.25em 0.5em;
background-color: #f5f5f5;
border-radius: 0.25em;
}
.tree-node:last-child .label {
color: red;
}
</style>
```
在上面的代码中,我们使用递归组件 `TreeNode` 渲染树形结构,并为最后一个节点的 label 添加了 `color: red` 样式。具体实现方式为在 `TreeNode` 组件的 `template` 中判断当前节点是否为最后一个节点,若是则为其 label 添加样式。
阅读全文