要实现显示el-tree
节点高亮,可以使用el-tree
提供的highlight-current
属性和current-node-key
属性,以及el-tree-node
组件提供的highlight
属性。
- 首先,在
el-tree
组件中设置highlight-current
属性为true
,表示启用高亮当前节点的功能:
- 然后,在
el-tree
组件中设置current-node-key
属性为一个字符串,表示当前高亮节点的唯一标识符。例如,假设每个节点有一个id
属性,我们可以将current-node-key
属性设置为'id'
:
- 接下来,在
el-tree-node
组件中设置highlight
属性为true
,表示当前节点需要高亮:
在上面的代码中,我们使用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
,表示取消高亮。
这样,当用户点击el-tree
中的某个节点时,该节点就会高亮显示。您可以根据需要调整节点的高亮样式,例如设置background-color
或color
等属性。