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()
})