使用 el-tree 和 el-table 时，往往需要根据项目整体环境做一些样式调整，记录一下常用样式。

• el-tree
  

  // 树结构样式调整
  ::v-deep .el-tree {background-color: $bottomContainerBackColor;// 未展开时三角图标颜色.el-icon-caret-right:before {color: #02B3BE;}// 展开时三角图标颜色.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {color: #02B3BE;}// 没有子节点时三角图标颜色（一般不显示）.el-tree-node__expand-icon.is-leaf::before {color: rgba(0, 0, 0, 0); // 透明}// 鼠标经过节点时高亮样式.el-tree-node__content:hover {background-color: $bottomContainerBackColor;background: url("~@/assets/bg-tree-item.png") no-repeat;background-size: cover;}// 点击节点左边三角形聚焦时的当前节点样式.el-tree-node:focus>.el-tree-node__content {background-color: $bottomContainerBackColor;}
  }// 当前选中节点的样式
  ::v-deep.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {background-color: $bottomContainerBackColor;background: url("~@/assets/bg-tree-item.png") no-repeat;background-size: cover;
  }// 标签超出宽度显示省略号
  .span-ellipsis {width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color: #fff; // 字体颜色
  }
  

• el-table

  

  .el-table {// thead 背景色.el-table__header-wrapper th {background: #263341!important;}// tbody 背景色.el-table__row {background: $bottomContainerBackColor;}// 表格 body 有数据和无数据时的背景色.el-table__empty-block,.el-table__body-wrapper {background: $bottomContainerBackColor;}// 单元格字体颜色.cell {color: #fff;}// 每行底部边框颜色td, th.is-leaf {border-bottom: 1px solid #4F5153;}
  }.el-table::before {background-color: #4F5153;
  }// table 鼠标经过时当前行高亮
  .el-table--enable-row-hover .el-table__body tr:hover > td{background-color: #374C62;
  }// 滚动条样式
  ::-webkit-scrollbar {background: $bottomContainerBackColor!important;
  }// 滚动条下背景
  ::-webkit-scrollbar-track {background-color: #2d3f51!important;
  }
  

PS: $bottomContainerBackColor 是 scss 变量：$bottomContainerBackColor: #2D3F51;