el-tree改变选中颜色
时间: 2024-09-20 16:15:03 浏览: 43
el-tree组件是Element UI库中的一个用于树状数据展示的组件。如果你想在用户点击节点时改变选中的颜色,你可以通过监听`node-click`事件,并在该事件处理器中更改选中状态的颜色。首先,你需要设置一个`default-checked-color`属性来定义默认选中颜色,然后在事件处理函数中更新选中的节点样式。
示例代码如下:
```html
<template>
<el-tree
:data="treeData"
:default-checked-color="#0090FF" <!-- 设置默认选中颜色 -->
@node-click="handleNodeClick"
></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: ... // 你的树状数据
};
},
methods: {
handleNodeClick(node) {
if (node.checked) { // 如果节点已选中
node.color = '#fff'; // 更改颜色为白色或其他你喜欢的颜色
} else {
node.color = '#0090FF'; // 否则恢复为默认颜色
}
node.setChecked(true); // 更新节点的选中状态
}
}
};
</script>
```
阅读全文