I want to make a feature about fixed thead in el-table. I plan to use Node.cloneNode() to clone the thead DOM and then fixed it. EveryThing goes well but something pazzle me.

I get the thead DOM and console it. It show me a width. Then I got a new clone DOM by using Node.cloneNode() and console it. It show me another width. It seems that cloneNode() not work well.

I have no idea and use setTimeout() to wrap Node.cloneNode(). It has a correct width equal to the first Time.

Brief code

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

total code

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

console in chrome