Ant Design Vue的tree树，样式连接线与文本溢出隐藏

顾尘眠

已于 2024-09-13 09:20:04 修改

阅读量356

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2024-09-12 08:57:45 首次发布

本文链接：https://blog.youkuaiyun.com/zero_er/article/details/142164311

效果图

html代码

 <a-tree
  :treeData="docTree"
 >
        <span slot="title" slot-scope="{ title }">
          <span :title="title">{{ title }}</span>
        </span>
      </a-tree>

CSS代码

@set-color: #7c7c7c;
/deep/.ant-tree-child-tree.ant-tree-child-tree-open > li:first-child {
  padding-top: 4px;
}
.last-menu-line() {
  position: absolute;
  left: 12px;
  width: 1px;
  height: 100%;
  margin: 22px 0 0;
  border-left: 1px dotted @set-color;
  content: ' ';
}
.ant-tree /deep/li {
  position: relative;
  &:before {
    position: absolute;
    left: 12px;
    width: 1px;
    height: 100%;
    height: calc(100% - 45px);
    margin: 22px 0 0;
    border-left: 1px dotted @set-color;
    content: ' ';
  }
  .ant-tree-node-content-wrapper {
    padding: 0;
    width: 90%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .ant-tree-child-tree.ant-tree-child-tree-open > li {
    &::after {
      content: '';
      position: absolute;
      width: 8px;
      height: 1px;
      border-top: 1px dotted @set-color;
      background: transparent;
      top: 15.5px;
      left: -5px;
      margin: 0;
    }
    .ant-tree-switcher-noop {
      height: 1px;
      border-top: 1px dotted @set-color;
      top: 11.5px;
      left: 4px;
      margin: 0;
      width: 18px;
      margin-right: 6px;
    }
  }
}