table組件錯(cuò)位問(wèn)題。

image.png

table組件錯(cuò)位朋截，不管是用element-ui的table組件蛹稍，還是ant的table組件，只要使用了列的fixed屬性部服，在第一次進(jìn)入頁(yè)面時(shí)就會(huì)出現(xiàn)唆姐。

原因查找

經(jīng)檢查dom發(fā)現(xiàn)使用fixed后，table組件實(shí)際由3個(gè)table組成廓八，左邊一個(gè)奉芦，中間一個(gè)，右邊一個(gè)

image.png

剧蹂。如果中間表格有某一列的內(nèi)容有換行或者特殊內(nèi)容等声功，

image.png

，這會(huì)導(dǎo)致表格實(shí)際高度比沒(méi)有特殊內(nèi)容要高宠叼。三個(gè)表格初次渲染的時(shí)候先巴，由于中間表格高度還在變化，左右兩邊的表格讀取到的高度不準(zhǔn)確冒冬。導(dǎo)致錯(cuò)位伸蚯。

錯(cuò)位消失機(jī)制

經(jīng)反復(fù)測(cè)試發(fā)現(xiàn)只要觸發(fā)table表格頁(yè)面重排，錯(cuò)位就消失了窄驹，例如勾選一下選擇列朝卒，點(diǎn)擊刷新按鈕重新調(diào)下接口重新加載數(shù)據(jù)证逻，瀏覽器窗口尺寸編號(hào)等乐埠。這是因?yàn)樽鲞@些操作會(huì)觸發(fā)瀏覽器頁(yè)面元素重排，重排會(huì)導(dǎo)致瀏覽器重新對(duì)頁(yè)面布局囚企，尺寸進(jìn)行計(jì)算丈咐，這時(shí)候中間的表格高度也確定了，左右兩邊重新獲取了準(zhǔn)確的高度龙宏。

解決思路

根據(jù)反復(fù)測(cè)試表格消失的原因棵逊，解決思路之一就是如何在代碼里面觸發(fā)表格重排辆影。

試驗(yàn)一

在表格初次渲染完成以后，代碼里面用splice手動(dòng)替換第一條數(shù)據(jù)

image.png

該方法經(jīng)實(shí)驗(yàn)可行蛙讥。但是經(jīng)反復(fù)不斷測(cè)試灭衷，還是有出現(xiàn)錯(cuò)位的可能∨蓿總體來(lái)說(shuō)還是表格渲染比較復(fù)雜闻妓。分成3個(gè)表格后，三個(gè)表格是獨(dú)立渲染的算凿，接收一次數(shù)據(jù)犁功，中間的表格可能會(huì)執(zhí)行多次，最后一次執(zhí)行后署鸡，表格高度還是會(huì)發(fā)生變化限嫌，而兩邊的表格卻并沒(méi)有再變化。別問(wèn)我是如何知道的炉抒，瀏覽器控制臺(tái)打印三個(gè)表格的高度看數(shù)據(jù)看到的焰薄。

試驗(yàn)二

根據(jù)方法一試驗(yàn)的結(jié)果和獲取表格高度數(shù)據(jù)的分析扒袖，進(jìn)行第二次試驗(yàn)。這次主要改變點(diǎn)就是要不斷監(jiān)聽(tīng)三個(gè)表格高度變化情況野瘦，確認(rèn)三個(gè)表格高度一致后才定制飒泻。準(zhǔn)確說(shuō)是兩邊的高度和中間的表格高度誤差在一個(gè)像素以內(nèi)。這個(gè)誤差值也是測(cè)試觀察表格高度數(shù)據(jù)得出的結(jié)論惰许，并且誤差在一個(gè)之內(nèi)刹孔，肉眼基本看不出錯(cuò)位。
關(guān)鍵代碼如下卦睹，這段代碼放表格渲染的render函數(shù)中：

    let tableId = ""
    if (props.dataSource.length) {
      const firstDataIndex = this.oldColumns[0].dataIndex.replace(/\./g, "")
      tableId = `tableId${firstDataIndex}${props.dataSource[0][props.rowKey]}`
      this.tableId = tableId
      this.$nextTick(()=>{
        // 解決錯(cuò)位問(wèn)題，定時(shí)檢查高度障斋，觸發(fā)頁(yè)面重排
        this.updateTableHeight(() => props.dataSource.splice(0, 1, props.dataSource[0]))
      })
    }

在methods中定義updateTableHeight函數(shù)垃环。經(jīng)測(cè)試返敬，表格render執(zhí)行5次后，高度已基本穩(wěn)定涛目。這里使用定時(shí)器監(jiān)聽(tīng)表格高度變化凛澎，當(dāng)高度誤差大于1px時(shí)，執(zhí)行一次重排觸發(fā)沫换。

methods:{
    /**
     * 更新表格高度
     * @param callback
     */
    updateTableHeight(callback) {
      clearInterval(this.interval)
      // console.log(this.tableId)
      const tableWrap = document.getElementById(this.tableId)
      // console.log(tableWrap)
      if(!tableWrap){
        return
      }
      const tableMiddle = tableWrap.querySelector(".ant-table-fixed")
      if (!tableMiddle) {
        return
      }
      const intervalSetHeight = () => {
        const tableRight = tableWrap.querySelector(".ant-table-fixed-right")
        const tableLeft = tableWrap.querySelector(".ant-table-fixed-left")
        clearInterval(this.interval)
        this.interval = setInterval(()=>{
          if(this.renderNum > 5){
            clearInterval(this.interval)
            return
          }
          // console.log(tableRight.clientHeight)
          const middleHeight = tableMiddle.clientHeight
          const leftHeight = tableLeft ? tableLeft.clientHeight : -1
          const rightHeight = tableRight ? tableRight.clientHeight : -1
          if (leftHeight !== -1) {
            if (middleHeight - leftHeight > 1) {
              callback()
            }
          } else if (rightHeight !== -1) {
            if (middleHeight - rightHeight > 1) {
              callback()
            }
          }
          this.renderNum++
        },100)
      }
      intervalSetHeight()
    }
}

解決的背后

以上就是解決ant-design-vue 表格錯(cuò)位的思路讯赏。也可以用于element-ui待逞。但是這種思路并不是很好网严。各位大神嗤无，有好的思路嗎？