Elementui中el-tree点击关闭选中颜色问题

Elementui中el-tree点击关闭选中颜色问题
https://blog.csdn.net/qq_44316317/article/details/122043266

elementui中el-tree实现选中高亮显示关闭重新打开选中不销毁效果在父组件中显示子个数

一.Element-UI tree 组件 点击后高亮显示的样式修改(背景色)树，设置check-change时，点击行选中，点击三角符号可以展开，但是颜色不受控制

   <el-tree
          :data="treedata"
           accordion
           node-key="id"
           ref="tree"
           highlight-current
           :props="defaultProps"
           @check-change="handleCheckChange"
           check-on-click-node
    ></el-tree>
1
2
3
4
5
6
7
8
9
10

二. 记录一下悬浮颜色修改

/deep/ .el-tree-node__content:hover {
  background: rgba(255, 255, 255, 0.05);
}
/deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color:  rgba(35, 220, 205, 0.78);
}
/deep/.el-tree {
  background: #10498f;
  color: #ffffff;
}
/deep/ .el-tree-node:focus > .el-tree-node__content {
  background-color:rgba(35, 220, 205, 0.78);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

elementui 中给在父组件中显示子个数

   <el-tree :data="treeInnerSource" :props="defaultProps" accordion node-key="id" ref="tree" highlight-current  check-on-click-node  @node-click="handleNodeClickByInner">
              <div class="custom-tree-node flex" slot-scope="{ node, data }">
                <div>{{ data.name }}</div>
                <div v-if="data.pageVos&&data.pageVos.length" class="numberTips">
                  {{data.pageVos ? data.pageVos.length : ''}}
                </div>
              </div>
            </el-tree>
1
2
3
4
5
6
7
8