el-tree改成表格样式

最新推荐文章于 2025-03-18 09:21:02 发布

原创最新推荐文章于 2025-03-18 09:21:02 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用Element UI的El-Tree组件并结合jQuery实现的自定义样式方法，该方法支持最多四级权限显示，并调整了不同层级节点的显示方式。

最近公司ui出了个这样做的权限，emmm

这是我写的，样式只支持四级，最后一级横着排，其余都竖直排

需要用到jq

  <el-tree :data="data"
                   show-checkbox
                   node-key="id"
                   default-expand-all
                   ref="channelTree"
                   @check-change="nodecheck">
          </el-tree>

addClass() {
      // eslint-disable-next-line no-undef
      $('.is-leaf').parent().parent().parent().addClass('addclass');
      // eslint-disable-next-line no-undef
      $('.expanded').parent().parent().parent().removeClass('addclass');
      // eslint-disable-next-line no-undef
      $('.is-leaf').parent().addClass('removeclass');
    },

  created() {
    this.$nextTick(() => {
      this.addClass();
    });
  },

/deep/.el-tree {
        border-top: 1px solid #E5E7ED;
        border-left: 1px solid #E5E7ED;
        border-right: 1px solid #E5E7ED;
        width: 98%;
        margin-bottom: 40px;
        .el-tree-node__label{
            margin:10px 70px 10px 0;
        }
    .el-tree-node{
        .el-tree-node{
            .el-tree-node__children{
                width: 100%;
            }
            .el-tree-node{
                &:not(:first-child){
                .el-tree-node__content{
                    border-right: 1px solid #E5E7ED;
                }
                border-top: 1px solid #E5E7ED;
            }
            }

        }
    }
                .removeclass{
                    border-right: none !important;
                }
                .removetop{
                    border-top: none !important;
                }
            .addclass{
                    .el-tree-node:not(:first-child){
                        .el-tree-node__content{
                        border-left: none !important;
                    }
                    }
            }
                .el-tree-node__content {
                    padding: 5px 10px !important;
                    height: auto;
                    .el-tree-node__expand-icon.el-icon-caret-right {
                    display: none;
                    }
                }
                > .el-tree-node {
                    padding: 0 !important;
                    display: flex;
                    border-bottom: 1px solid #E5E7ED;

                    > .el-tree-node__children {
                    width: 100%;
                    > .el-tree-node {
                        &:not(:first-child) {
                        border-top: 1px solid #E5E7ED;
                        }
                        >.el-tree-node__content{
                            border-left: 1px solid #E5E7ED;
                            border-right: 1px solid #E5E7ED;
                        }
                    }
                    }
                }
        /deep/ .addclass{
            display: flex;
            flex-direction: row !important;
            flex-wrap: wrap;
        >.el-tree-node{
            border-top: none !important;
            }
        }
  .el-tree-node__children {
    display: flex;
    flex-direction: column;
    .el-tree-node {
      display: flex;
      padding: 0px !important;
      .el-tree-node__content {
        border-bottom: none;
        .custom-tree-node {
          height: 24px;
          display: flex;
          align-items: center;
          .tree-btn {
            margin-left: 10px;
            display: none;
          }
          .el-button {
            padding: 0px !important;
            border-radius: 4px;
            background: #363554;
            color: #ffffff;
          }
        }
      }
      .el-tree-node__children {
        .el-tree-node {
          &:not(:first-child) {
            .el-tree-node__content {
              border-left: none;
            }
          }
        }
      }
    }
  }
}

大概是这样吧