el-tree设置树状图样式

结构：

<!-- 左侧树状结构 -->
    <div class="leftTree">
        <el-tree
        :data="treeData"
        :props="defaultProps"
        accordion
        node-key="id"
        :default-expanded-keys="[1]"
        :default-checked-keys="[1]"
        @node-click="handleNodeClick">
      </el-tree>
    </div>

data中变量：

 data(){
    return{
      treeData:[],
      defaultProps: { 
        children: 'children',
        label: 'label'
      },
    }
  },

css样式：

.leftTree{
    flex:1;
    border: 1px solid;
    overflow: auto;
    ::v-deep .el-tree {
      background: #1c1c1a;
      color: #d5bd87;
      .el-tree-node__content{
          height: 80px;
          border-bottom: 1px dashed #605849;
          .el-tree-node__label{
            font-size: 30px;
          }
      }
      .el-tree-node__content:hover {   
         background-color: transparent;
      }
      .el-tree-node:focus > .el-tree-node__content {
        background-color: #000;
        border:1px solid #83734f;
        border-right: none;
        color: #fff;
      }
      .el-tree-node__content>.el-tree-node__expand-icon{
        font-size: 23px;
      }
    }
    &::-webkit-scrollbar{
      width: 8px; // 横向滚动条
      height: 8px; // 纵向滚动条 必写
    }
    &::-webkit-scrollbar-thumb{
      background-color: #d9bb95;
      border-radius: 3px;
    }
  }