Quiero hacer una función sobre cabeza fija en el-table. Planeo usar Node.cloneNode() para clonar el DOM de thead y luego arreglarlo. Todo va bien, pero algo me desconcierta.
Obtengo el DOM de thead y lo consuelo. Me muestra un ancho. Luego obtuve un nuevo clon DOM usando Node.cloneNode() y lo consolé. Me muestra otro ancho. Parece que cloneNode() no funciona bien.
No tengo idea y uso setTimeout() para envolver Node.cloneNode(). Tiene un ancho correcto igual a la primera vez.
Breve código
handleHeaderDragend(newWidth, oldWidth, column, event) { this.initFixedHead() }, initFixedHead() { this.$nextTick(() => { //el-table-fixed-header come out in the nextTick console.log(1, wrapper) console.log(2, wrapper.cloneNode(true)) setTimeout(() => { console.log(3, wrapper.cloneNode(true)) }, 0) }) }codigo total
handleHeaderDragend(newWidth, oldWidth, column, event) { // console.log('haha') this.initFixedHead() }, initFixedHead() { this.$nextTick(() => { const wrapper = this.$refs.table.$el.querySelector('.el-table__header-wrapper') const fixedWrapper = this.$refs.table.$el.querySelector('.el-table__fixed-header-wrapper') const headBox = document.querySelector('.sugar-table .el-table') const fixedHeadBox = document.querySelector('.sugar-table .el-table__fixed') if (fixedHeadBox.children.length > 0) { headBox.firstElementChild && headBox.removeChild(headBox.firstElementChild) fixedHeadBox.firstElementChild && fixedHeadBox.removeChild(fixedHeadBox.firstElementChild) } console.log(1, wrapper) console.log(2, wrapper.cloneNode(true)) setTimeout(() => { console.log(3, wrapper.cloneNode(true)) this.fixedHeadWidth = this.$refs.table.$el.querySelector('.el-table__fixed').getBoundingClientRect().width headBox.insertAdjacentElement('afterbegin', wrapper.cloneNode(true)) fixedHeadBox.insertAdjacentElement('afterbegin', fixedWrapper.cloneNode(true)) }, 0) }) }