用 el-tree 实现 el-table 效果

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

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

template

 

      

        
权限名称
        
权限描述
        
外部资源链接
        
操作
      
      

        
          
            
          
        
      
    

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;
          }
        }
      }
    }
  }