his-tree/src/index.less

his tree vue component

.his-tree {
  font-size: 16px;
  color: #55657D;

  .icon_up {
    background: url(./images/icon_up@2x.png) no-repeat left center;
    background-size: 7px 12px;
  }

  .icon_down {
    background: url(./images/icon_down@2x.png) no-repeat left center;
    background-size: 12px 7px;
  }

  /deep/ .el-tree {
    background-color: #F5F7F9;
    font-size: 14px;
    color: #55657D;

    .is-checked > .el-tree-node__content {
      background-color: #E6E9EC;

      .add, .remove {
        display: inline-block;
      }
    }

    .el-tree-node__content {
      height: 30px;

      .el-tree-node__expand-icon {
        .icon_up;
        transform: none;
        margin-right: 5px;
        margin-left: 40px;
        position: relative;
        top: -2px;

        &.expanded {
          .icon_down;
          margin-right: 10px;

        }

        &.is-leaf {
          margin-right: 0;
          background: none;
        }

        &.el-icon-caret-right:before {
          content: ' ';
        }
      }

      &:hover {
        .add, .remove {
          display: inline-block;
        }
      }

      .add, .remove {
        display: none;
        width: 14px;
        height: 14px;
        margin-left: 20px;
        position: relative;
        top: -2px;

        &.add {
          background: url(./images/icon_add@2x.png) no-repeat center;
          background-size: 14px 14px;
        }

        &.remove {
          background: url(./images/icon_remove@2x.png) no-repeat center;
          background-size: 14px 14px;
          margin-left: 10px;
        }
      }

      .custom-tree-node {
        .text {
          max-width: 150px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
        }
      }
    }
  }
}