tree树桩结构 自定义

elemtent tree样式修改

最近好久没有添加新文章了 借着在项目中遇到的 要借用element的tree树桩组件
但是

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

就这单单一行 一些样式不知无从下手 （菜菜的我是这样想的，一些大佬勿喷）
这默认的样式不满足我了

<div class="tree-data">
      <el-tree
        class="panel treeWrap"
        :data="treeData"
        text-color="#fff"
        :props="defaultProps"
        @node-click="handleNodeClick"
        :filter-node-method="filterNode"
        :default-expanded-keys="expandedarr"
        :current-node-key="expandedarrnode"
        node-key="id"
        ref="leftTree"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span class="active">
            <el-button
              type="text"
              size="mini"
              @click.stop="() => addition(data)"
              v-if="node.level == 1"
            >
              <i class="el-icon-plus"></i>
            </el-button>
            <el-button type="text" size="mini" @click.stop="() => remove(data)">
              <i class="el-icon-delete"></i>
            </el-button>
          </span>
        </span>
      </el-tree>
    </div>

css

.tree-data::-webkit-scrollbar-button {
  display: none;
}

.Code-content-left-top-bottom-box .el-input .el-input__inner {
  border: none;
}
.treeWrap .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.treeWrap .el-icon-caret-right:before {
  content: '\e6df';
}
.treeWrap .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  content: '\e6df';
}
.treeWrap .is-current {
  position: relative;
}
.treeWrap .is-current > .el-tree-node__content {
  background: #f6f9fd;
  font-size: 12px;
  color: #1665d8;
}
.treeWrap .is-current:before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  height: 28px;
  width: 3px;
  background: #1665d8;
}
.treeWrap .el-tree-node__content {
  height: 28px;
}
.treeWrap .el-tree-node__content > .el-tree-node__expand-icon {
  margin-left: 30px;
  margin-right: 10px;
}
.treeWrap .el-tree-node__label {
  font-size: 12px;
}
//上面一些是写入全局的（就是style 不加scoped）
.tree-data {
  width: 100%;
  height: 620px;
  box-sizing: border-box;
  overflow-y: scroll;
  font-size: 12px;
}
.tree-data::-webkit-scrollbar {
  width: 15px;
}

另外还有一些js的操作

 enterinput() {  //设置默认的展开项
      this.expandedarr = [];
      let ss = this.arrts(this.treeData);

      ss.map(v => {
        if (v.name.indexOf(this.seach) != -1) {
          if (this.expandedarr.length > 0) {
            return;
          } else {
            this.expandedarr.push(v.id);
            return;
          }
        }
      });

      if (this.expandedarr.length == 0) {
        this.$message({
          type: 'info',
          message: '未找到搜索相关信息'
        });
      }
      this.expandedarrnode = this.expandedarr[0];
    },
    arrts(arr) {  //将数组扁瓶化
      var newArr = [];
      for (var i = 0; i < arr.length; i++) {
        if (Array.isArray(arr[i].children)) {
          newArr.push.apply(newArr, this.arrts(arr[i].children));
        } else {
          newArr.push(arr[i]);
        }
      }
      return newArr;
    },

自己记笔记 文章不太连贯