el-tree点击选中高亮
时间: 2023-07-20 14:32:17 浏览: 139
ListView选中行高亮
5星 · 资源好评率100%
要实现el-tree点击选中高亮效果,可以通过以下步骤实现:
1. 在el-tree组件中添加@click事件监听树节点的点击事件;
2. 在@click事件中获取当前点击的节点对象,可以通过参数(node, instance)获取;
3. 使用el-tree组件提供的setCurrentKey方法设置当前节点的key值,使其选中并高亮;
4. 在样式中为选中的节点添加高亮效果,可以使用el-tree组件提供的node-key属性来设置节点的唯一标识,然后通过自定义样式来实现高亮效果。
示例代码如下:
```html
<template>
<el-tree
:data="treeData"
:props="treeProps"
@click="handleNodeClick"
></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
label: '节点1',
children: [
{
label: '子节点1'
},
{
label: '子节点2'
}
]
},
{
label: '节点2',
children: [
{
label: '子节点3'
},
{
label: '子节点4'
}
]
}
],
treeProps: {
label: 'label',
children: 'children'
}
}
},
methods: {
handleNodeClick(node, instance) {
// 设置当前节点选中并高亮
instance.setCurrentKey(node.key);
}
}
}
</script>
<style>
.el-tree-node--highlight {
background-color: #f5f5f5;
}
</style>
```
阅读全文