要实现显示 el-tree
节点高亮,可以使用 el-tree
提供的 highlight-current
属性和 current-node-key
属性,以及 el-tree-node
组件提供的 highlight
属性。
- 首先,在
el-tree
组件中设置highlight-current
属性为true
,表示启用高亮当前节点的功能:
<el-tree :data="treeData" :highlight-current="true" @current-change="handleCurrentChange">
<!-- 其他配置 -->
</el-tree>
- 然后,在
el-tree
组件中设置current-node-key
属性为一个字符串,表示当前高亮节点的唯一标识符。例如,假设每个节点有一个id
属性,我们可以将current-node-key
属性设置为'id'
:
<el-tree :data="treeData" :highlight-current="true" :current-node-key="'id'" @current-change="handleCurrentChange">
<!-- 其他配置 -->
</el-tree>
- 接下来,在
el-tree-node
组件中设置highlight
属性为true
,表示当前节点需要高亮:
<el-tree :data="treeData" :highlight-current="true" :current-node-key="'id'" @current-change="handleCurrentChange">
<template v-for="item in treeData">
<el-tree-node :key="item.id" :label="item.label" :highlight="item.id === currentNodeId">
<!-- 其他配置 -->
</el-tree-node>
</template>
</el-tree>
在上面的代码中,我们使用 v-for
循环遍历 treeData
数组,为每个节点生成一个 el-tree-node
组件,并且根据当前节点的 id
是否等于 currentNodeId
,设置 highlight
属性为 true
或 false
。
- 最后,在
el-tree
组件的current-change
事件中更新当前高亮节点的唯一标识符。例如,假设我们将当前节点的id
存储在currentNodeId
变量中:
data() {
return {
treeData: [], // 树形结构数据
currentNodeId: null, // 当前高亮节点的唯一标识符
// 其他数据
};
},
methods: {
handleCurrentChange(currentNode) {
if (currentNode) {
this.currentNodeId = currentNode.id; // 更新当前高亮节点的唯一标识符
} else {
this.currentNodeId = null; // 取消高亮
}
},
// 其他方法
}
在上面的代码中,我们在 handleCurrentChange
方法中根据当前节点是否存在来更新当前高亮节点的唯一标识符。如果当前节点不存在,则将 currentNodeId
设置为 null
,表示取消高亮。文章来源:https://www.toymoban.com/news/detail-475229.html
这样,当用户点击 el-tree
中的某个节点时,该节点就会高亮显示。您可以根据需要调整节点的高亮样式,例如设置 background-color
或 color
等属性。文章来源地址https://www.toymoban.com/news/detail-475229.html
到了这里,关于el-tree 实现节点高亮的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!