vue3调整el-tree样式

: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; }
上一篇:Ollama部署大模型并安装WebUi


下一篇:监控易监测对象及指标之:宝兰德中间件JMX监控指标解读