antd vue 树控件中自定义连接线

/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 @primary-color;
  content: " ";
}
ul.ant-tree.icon-tree /deep/li {
  & > .ant-tree-checkbox {
    margin-left: 24px;
    & + .ant-tree-node-content-wrapper > .ant-tree-title {
      > i:nth-child(1) {
        position: absolute;
        left: -42px;
        top: 5px;
      }
    }
  }
}
ul.ant-tree /deep/li {
  position: relative;
  &:nth-last-child(1) {
    /deep/&.ant-tree-treenode-switcher-open::before {
      .last-menu-line;
      height: calc(100% - 46px);
    }
  }
  &:before {
    position: absolute;
    left: 12px;
    width: 1px;
    height: 100%;
    height: calc(100% - 42px);
    margin: 22px 0 0;
    border-left: 1px dotted @primary-color;
    content: " ";
  }
  .ant-tree-node-content-wrapper {
    padding: 0;
    position: relative;
    > .ant-tree-icon__customize > i.anticon-folder-open,
    > .ant-tree-icon__customize > i.anticon-folder {
      color: orange;
    }
  }
  .ant-tree-switcher > i {
    color: #989898;
  }
  ul.ant-tree-child-tree.ant-tree-child-tree-open > li {
    &::after {
      content: "";
      position: absolute;
      width: 8px;
      height: 1px;
      border-top: 1px dotted @primary-color;
      background: transparent;
      top: 15.5px;
      left: -5px;
      margin: 0;
    }
    &:nth-last-child(1) {
      &.ant-tree-treenode-switcher-open::before {
        .last-menu-line;
        height: calc(100% - 40px);
      }
    }
    .ant-tree-switcher-noop {
      height: 1px;
      border-top: 1px dotted @primary-color;
      top: 11.5px;
      left: 4px;
      margin: 0;
      width: 18px;
      margin-right: 6px;
    }
  }
  span.ant-tree-switcher {
    background: rgba(0, 0, 0, 0);
  }
}
div ul.ant-tree /deep/li.ant-tree-treenode-switcher-open {
  // &::before {
  //   height: calc(100% - 18px);
  // }
  >ul.ant-tree-child-tree-open > li:nth-last-child(1) > ul::before {
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    background: #fff;
    left: -6px;
    top: 16px;
  }
  > ul.ant-tree-child-tree-open > li:nth-last-child(1) > span {
    &.ant-tree-node-content-wrapper::before {
      content: "";
      width: 1px;
      position: absolute;
      background: #fff;
      left: -30px;
      top: 10px;
      height: calc(100% + 10px);
    }
    &.ant-tree-checkbox + .ant-tree-node-content-wrapper::before {
      top: 13px;
      left: -52px;
    }
  }
  >.ant-tree-node-content-wrapper-normal::before {
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    background: #fff;
    left: -12px;
    top: 16px;
  }

  // &:nth-last-child(1) > ul.ant-tree-child-tree-open > li:nth-last-child(1) {
  //   position: absolute;
  // }
}
ul.ant-tree{
  background: #fff;
}
/deep/div
  ul.ant-tree.icon-tree
  > li.ant-tree-treenode-switcher-open
  > ul.ant-tree-child-tree-open
  > li:nth-last-child(1)
  > span.ant-tree-checkbox
  + .ant-tree-node-content-wrapper::before {
  content: "";
  width: 1px;
  position: absolute;
  background: #fff;
  left: -74px;
  top: 13px;
  height: calc(100% + 2px);
}