el-tree失去焦点丢失节点背景色

我遇到的丢失背景色一般都是冲突导致的
1.点击事件冲突

这个是我写的，但是点击后总是丢失背景色，原因是因为出发了两次点击，一个是当前节点的handleNodeClick，还有一个是onclick,存在冲突导致的
2.驱动tree 高亮冲突$

	// 监听路由 驱动tree 高亮
'$route.params.node_key': {
  handler: function (newVal, oldVal) {
    console.log('tree node_key', newVal)
    newVal && this.$refs.tree.setCurrentKey(newVal)
    if (newVal == '1-4') {
      // 主站
      this.$emit('singStatus', 4)
    }
  },
  immediate: true,
  deep: true
},

在需要点击按钮让tree高亮显示，这种方法因为值可能是null导致你的样式节点丢失
解决： newVal && this.$refs.tree.setCurrentKey(newVal)   使用&& 或 ？.来进行为空判断

3.背景色设置，高亮显示

// tree默认背景色
::v-deep .el-tree-node {
  background: #001529;
}
// tree内容颜色
::v-deep .el-tree {
  color: #fff;
}
// tree移动上的背景颜色
::v-deep .el-tree-node__content {
  &:hover {
    background: #22a1cd;
  }
}
// tree选中后的背景色
::v-deep {
  .el-tree-node.is-current > .el-tree-node__content {
    background: #22a1cd !important;
  }
}
// 收缩展开后的背景色
::v-deep .el-tree-node:focus > .el-tree-node__content {
  background: #22a1cd !important;
}

提示：::v-deep是vue3.0推荐使用的，/deep/ 与::v-deep都是深度修改组件样式，可能会影响到其它页面组件的样式，慎用，同样的还有一个 >>> 样式穿透
弹框设置取消，确定的样式
.el-radio-button >>> .el-radio-button__inner {
border-radius: 4px !important;
}
这几个都是深度修改，在（预处理器）sass，less，stylus中无法识别 >>>
记录学习