用 el-tree 实现 el-table 效果

有时候我们可能要实现如下这种效果：

光用 el-table 实现不了这种层级效果，所以博主就在 el-tree 的基础上进行了一点点改造

template

 <div class="tree-box">
      <div class="tree-nav">
        <div class="item">权限名称</div>
        <div class="item">权限描述</div>
        <div class="item">外部资源链接</div>
        <div class="item">操作</div>
      </div>
      <div class="tree-content">
        <el-tree
          ref="tree"
          :data="assignData"
          node-key="resourceId"
          :props="props"
          default-expand-all
          :expand-on-click-node="false"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <template>
              <div class="node_div">
                <span class="name-box">
                  {{ node.label }}
                </span>
                <span class="size-box">
                  {{ data.resourceDesc }}
                </span>
                <span class="secret-box">
                  {{ data.url }}
                </span>
                <span class="operate-box">
                  <alter-button
                    type="text"
                    size="medium"
                    class="el-icon-edit"
                    @click="Edite(node, data), (editeFormShow = true)"
                  ></alter-button>
                  <alter-button
                    type="text"
                    size="medium"
                    class="el-icon-delete"
                    @click="Delete(node, data), open()"
                  ></alter-button>
                </span>
              </div>
            </template>
          </span>
        </el-tree>
      </div>
    </div>

less 样式

 .tree-box {
    position: relative;
    height: 100%;
    font-weight: 700;
    .tree-nav {
      width: 100%;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e6e6e6;
      padding: 12px 0;
      .item {
        font-size: 14px;
        color: #666;
        text-align: center;
        &:nth-child(1) {
          width: 300px;
          text-align: left;
          padding-left: 25px;
        }
        &:nth-child(2),
        &:nth-child(3),
        &:nth-child(4) {
          flex: 0 0 310px;
        }
      }
    }
    .tree-content {
      /deep/.el-tree-node__content {
        margin-top: 15px;
        background-color: transparent;
        .el-icon-caret-right::before{
          color:#409eff;
        }
      }
      /deep/.el-tree-node {
        background-color: transparent !important;
      }
      /deep/.el-tree {
        background-color: transparent;
      }
      .custom-tree-node {
        width: 100%;
        font-size: 14px;
        .node_div {
          display: flex;
          align-items: center;
          span {
            text-align: center;
            &.name-box {
              width: 375px;
              text-align: left;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .size-box,
          .secret-box {
            flex: 0 0 268px;
            text-align: left;
          }
          .operate-box {
            flex: 0 0 300px;
            text-align: center;
          }
        }
      }
    }
  }