vue3调整el-tree样式

javascript 复制代码
:deep(.el-tree) {
      border: 10px;
      padding: 5px;
      background: rgba(7, 36, 77, 0);
      height: calc(100% - 49px) !important;
      color: #fff;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 20px;
      padding-left: 8px;
    }

    // 设置只有叶子节点有多选框
    :deep(.el-tree-node) {
        .is-leaf + .el-checkbox .el-checkbox__inner {
            display:inline-block;
            background-color: transparent;
            border:var(--two-border-color);
        }
        .el-checkbox__input> .el-checkbox__inner {
            display:none;
        }
    }

    :deep(.element-tree-node-label-wrapper ){
      padding-left: 10px;
      padding-top: 4px;
      padding-bottom: 4px;
    }
   
    :deep(.el-tree-node__content:hover){
      // 多选框 
      &>label.el-checkbox{
        margin-right: 0;
        // padding-right: 8px;
        background-color: var(--el-tree-background);
      }
      // 文字
      .element-tree-node-label-wrapper{
        background-color: var(--el-tree-background);
      }
      
    }

    :deep(.el-tree-node__content){
      label.el-checkbox{
        margin-right: 0;
      }
      // .el-icon{
      //   width: 0;
      // }
      .el-tree-node__expand-icon{
        transform: rotate(0);
        // background:url('/img/main/theme-blue/tree_open.png');
        background: var(--el-tree-open-bg);
        background-repeat: no-repeat;
        background-position: center;
        color: transparent;
      }

      .el-tree-node__expand-icon.expanded{
        transform: rotate(0);
        // background:url('/img/main/theme-blue/tree_close.png');
        background: var(--el-tree-close-bg);
        background-repeat: no-repeat;
        background-position: center;
        color: transparent;
      }
    }

    :deep(.el-tree-node__content:hover,.el-upload-list__item:hover){
        background-color: transparent;
    }

    
    :deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
      background-color: rgba(0, 204, 255, 0.5);
      background-color:transparent;
    }
    
    :deep(.el-tree-node:focus>.el-tree-node__content) {
      background-color: rgba(0, 204, 255, 0.5);
      background-color: transparent;
    }
    
    :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
      background-color: var(--el-tree-check-background) !important;
    }
    
    :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: var(--el-tree-check-background);
    }
    
    :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner::before) {
      background-color: var(--el-tree-check-inner) !important;
    }
    
    :deep(.el-checkbox__input.is-checked .el-checkbox__inner::after) {
      border-color: var(--el-tree-check-inner);
    }

    // 竖线
    :deep(.element-tree-node-line-ver) {
      border-left: var(--el-tree-line-color);
    }

    // 横线 
    :deep(.element-tree-node-line-hor) {
      /* border-bottom: 1px dashed rgba(0, 204, 255, 0.5); */
      border-bottom: var(--el-tree-line-color);
    }

    :deep(.el-tree>.el-tree-node>.el-tree-node__content>.element-tree-node-label-wrapper>.element-tree-node-line-hor){
      border-bottom:none;
    }