vxe 树节点的连接线问题解决方法

85 阅读1分钟

vxe-table和vxe-grid的指示线不兼容行高拖动,或者单元格不使用showOverflow属性进行自动换行,线会短一些或太长,这里是开启了虚拟滚动,gt为0的渲染

function renderLine() {
  const elements = vGrid.value.getEl().getElementsByClassName('col--tree-node')
  for (let i = 1; i < elements.length; i++) {
    const treeLine = elements[i].getElementsByClassName('vxe-tree--line')[0]
    if (!treeLine) continue

    const cell = elements[i].getElementsByClassName('vxe-cell--wrapper')[0]
    treeLine.style.bottom = `-${cell.offsetTop + cell.offsetHeight / 2}px`
    let prev = elements[i - 1]
    const clone = treeLine.cloneNode(true)
    let height = prev.clientHeight / 2 - +clone.style.bottom.replace('px', '')

    if (clone.style.left < prev.getElementsByClassName('vxe-tree--line')[0]?.style.left) {
      for (let j = i - 1; j >= 0; j--) {
        const left = elements[j].getElementsByClassName('vxe-tree--line')[0]?.style.left
        if (!left) continue
        if (left === clone.style.left) break
        height += +elements[j]
          .getElementsByClassName('vxe-tree--line')[0]
          ?.style.height.replace('px', '')
      }
    }

    clone.style.height = height + 'px'
    treeLine.parentNode.replaceChild(clone, treeLine)
  }
  requestAnimationFrame(renderLine)
}

onMounted(() => {
  renderLine()
})