elementUI 的 tree组件 当点击一个节点的时候会有背景色 然后在其他区域点击背景色会消失 怎么保留
时间: 2024-02-09 22:08:32 浏览: 13
ElementUI 的 Tree 组件在点击节点时会给当前节点添加一个 `node-clicked` 类名来设置节点的背景色。当点击其他区域时,`node-clicked` 类名会被移除,节点的背景色也随之消失。
如果想保留节点的背景色,可以使用CSS来手动设置节点的样式,例如:
```css
/* 选中节点的样式 */
.el-tree .el-tree-node.is-current {
background-color: #ebeef5;
}
/* 点击节点后的样式 */
.el-tree .el-tree-node.is-clicked {
background-color: #ebeef5;
}
```
这样,即使点击其他区域,节点的背景色也会保留。如果需要在点击其他节点时取消当前节点的选中状态,可以在 Tree 组件的 `node-click` 事件中处理,例如:
```html
<el-tree @node-click="handleNodeClick"></el-tree>
```
```javascript
methods: {
handleNodeClick(data, node) {
// 取消当前节点的选中状态
const el = node.$el.querySelector('.el-tree-node.is-clicked')
if (el) {
el.classList.remove('is-clicked')
}
}
}
```
这样,当点击其他节点时,当前节点的选中状态就会被取消。同时,由于我们手动设置了节点的背景色样式,选中节点的背景色也会保留。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)