改写el-tree样式

如图：

关键代码：

 <div class="new-nav" :class="showNav?'':'no-nav'" ref="newNav">
      <el-row :gutter="20">
        <!--部门数据-->
        <el-col :span="24" :xs="24">
          <div class="head-container">
            <el-input
              v-model="deptName"
              placeholder="请输入部门名称"
              clearable
              size="small"
              prefix-icon="el-icon-search"
              style="margin-bottom: 20px"
            />
          </div>
          <div class="head-container">
            <el-tree
              :data="deptOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              node-key="id"
              :default-expand-all="defaultExpand"
              :default-expanded-keys="nodeKey"
              @node-click="handleNodeClick"
            >
            <span class="custom-tree-node" slot-scope="{ node, data }" @click="setAllExpand(node, data)"
                  style="margin-top: 10px;"
            >
              <span v-show="node.level==1" style="position: absolute;left: 10px;margin-right: 10px;">
                <i class="el-icon-folder-opened" style="font-size: 20px;"></i>
              </span>
              <span v-show="defaultExpand" :class="node.level==1?'':'sxian'"></span>
              <span v-show="defaultExpand" :class="node.level==1?'':'hxian'"></span>
              <!--              <span class="hxian"></span>-->
              <!--              <span>{{ node.checked }}</span>-->
              <!--              <span>{{ node.parent.data[0].label }}</span>-->
              <span v-show="node.level==1" style="margin-left: 40px;" ref="firstLabel">{{ node.label }}</span>
              <span v-show="defaultExpand&&node.level>1" ref="getLabel" style="z-index: 999;">{{ node.label }}</span>
              <span v-show="node.level==1" style="margin-left: 10px;">
                <i class="el-icon-arrow-down"></i>
              </span>
              <span v-show="node.isCurrent&&node.level>1&&defaultExpand==true">
                <i class="el-icon-arrow-right" style="margin-left: 20px;"></i>
              </span>
            </span>
            </el-tree>
          </div>
        </el-col>
      </el-row>
    </div>

  methods: {
    // 节点单击事件
    handleNodeClick(data, checked, indeterminate) {
      this.deptId = data.id
      console.log('this.deptId')
      console.log(data)
      console.log(this)
      console.log(checked)
      console.log(checked.innerHTML)
      console.log(checked.label)
      // checked.label='哈哈哈'
      console.log(indeterminate)

      // // console.log(this.$refs.tree.$el.innerHTML)
      // // this.$refs.tree.$el.innerHTML = "<div class='new' >这是新的内容，样式为红色</div>";
      console.log(this.$refs.tree.$el)
      console.log(this.$refs.tree.getCheckedNodes())
      console.log(this.$refs.tree.getCheckedKeys())
      // console.log(this.deptId)
      this.reloadIndex()
    },

    setAllExpand(node, data, checked, indeterminate) {

      //
      console.log(node)
      console.log(this.deptOptions[0].children)

      console.log(checked)
      console.log(node.checked)

      // console.log(indeterminate)
      // console.log(node.id)
      // console.log(node.level)
      // console.log(node.level == '1')

      if (node.level == '1') {

        // this.$set(this,'defaultExpand',false)
        this.defaultExpand = !this.defaultExpand

        if (this.deptOptions[0].children.length > 0) {
          this.deptOptions[0].children = []
        } else if (this.deptOptions[0].children.length == 0){
          this.deptOptions[0].children = this.deptOptionsArr
        }

      }
    },  
  // 筛选节点
    filterNode(value, data) {
      // console.log(value)
      // console.log(data)
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }

<style>
.el-progress--circle .el-progress__text {
  color: #913dff;
  font-size: 26px !important;
}

.new-nav .el-tree-node__content {
  position: relative;
  font-size: 15px;
  height: 30px;
  line-height: 60px;
  /*background-color: purple;*/
  /*margin: 10px auto;*/
}

.new-nav .el-tree-node__content .el-icon-caret-right {
  /*background-color: red;*/
  height: 30px;
  width: 200px;
}

.new-nav .el-tree-node__content .el-tree-node__expand-icon {
  /*display: none;*/
  /*left: 1px;*/
  /*opacity: 0;*/
  position: absolute;
  /*right: -100px;*/
  background-color: red;
  border: 1px fuchsia solid;
  /*background-color: #060269;*/
  z-index: -99999999999;
  /*color:#060269;*/
}

.new-nav .el-tree-node__content .expanded {
  /*background-color: deeppink;*/
  position: absolute;
  left: 50px;
  height: 200px;
  width: 30px;
}

.new-nav .el-tree {
  color: white;
  background-color: #060269;
}

.new-nav .el-tree-node__content:hover {
  color: white;
  background-color: #2f42e4;
}

.new-nav .el-input__inner {
  /*color: white;*/

  background-color: #060269;
  border: 1px solid #2f42e4;
}

.new-nav .el-tree-node__content:hover {
  background-color: #2f42e4;
}

.el-tree-node:focus > .el-tree-node__content {
  background-color: #2f42e4;
}

</style>

 .new-nav {
    float: left;
    height: 100%;
    width: 15%;
    padding-right: 20px;

    .custom-tree-node {
      //background-color: green;
      //height: 50px;
      margin: 0;
      //padding: 0 0 0 0.5em;
      .sxian {
        width: 1px;
        height: 2em;
        display: inline-block;
        background-color: #fff;
      }

      .hxian {
        width: 1em;
        height: 1px;
        display: inline-block;
        background-color: #fff;
        position: relative;
        top: -0.3em;
        margin-right: 10px;
      }

      span:first-child {

      }

      //span {
      //  list-style: none;
      //  position: relative;
      //}
      //
      //span:first-child:before {
      //  border-style: none none solid none;
      //}
      //
      //span:before {
      //  position: absolute;
      //  content: '';
      //  top: -0.01em;
      //  left: -0.7em;
      //  width: 0.5em;
      //  height: 0.615em;
      //  border-style: none none solid solid;
      //  border-width: 0.05em;
      //  border-color: #aaa;
      //}
      //
      //span:not(:last-child):after {
      //  position: absolute;
      //  content: '';
      //  top: 0.7em;
      //  left: -0.7em;
      //  bottom: 0;
      //  border-style: none none none solid;
      //  border-width: 0.05em;
      //  border-color: red;
      //}
    }
  }