Tree component in Vue + iView covers the background color of clicking and moving mouse in

Time:2021-6-13

Tree component in Vue + iView covers the background color of clicking and moving mouse in

1. Development environment Vue + iView
2. Computer system Windows 10 professional edition
3. In the process of using Vue + iView development, we will use the tree component according to the requirements. Let me share it with you, hoping to help you ~!
4. Add the following code to the template:

 <Scroll style="width: 100%" height="760">
   <Tree
    @on-select-change="chentreelick"
    :data="treedata"
    expand-node
   ></Tree>
</Scroll>

5. The effect picture is as follows:
Tree component in Vue + iView covers the background color of clicking and moving mouse in

Note: the first background color is the effect of mouse moving in, and the second background color is the effect after clicking

6. We feel that this style will be ugly. How can we override the default style? The code is as follows:

.ivu-tree-title-selected,.ivu-tree-title-selected:hover{
  background-color: rgb(81, 97, 187) !important;
}

.ivu-tree-title:hover{
  background-color: rgb(81, 97, 187) !important
}

7. The effect picture after covering is as follows:
Tree component in Vue + iView covers the background color of clicking and moving mouse in
8. The sharing of this issue ends here. I hope it can help you. Let’s work together to reach the peak!

Recommended Today

What is “hybrid cloud”?

In this paper, we define the concept of “hybrid cloud”, explain four different cloud deployment models of hybrid cloud, and deeply analyze the industrial trend of hybrid cloud through a series of data and charts. 01 introduction Hybrid cloud is a computing environment that integrates multiple platforms and data centers. Generally speaking, hybrid cloud is […]