ant-design-vue table 表格组件错位解决

ant-design-vue table 表格组件错位解决

• • 原因查找
  • 错位消失机制
  • 解决思路
  • • • 试验一
      • 试验二
  • 解决的背后

table组件错位问题。

table组件错位，不管是用element-ui的table组件，还是ant的table组件，只要使用了列的fixed属性，在第一次进入页面时就会出现。

原因查找

经检查dom发现使用fixed后，table组件实际由3个table组成，左边一个，中间一个，右边一个

。如果中间表格有某一列的内容有换行或者特殊内容等，

，这会导致表格实际高度比没有特殊内容要高。三个表格初次渲染的时候，由于中间表格高度还在变化，左右两边的表格读取到的高度不准确。导致错位。

错位消失机制

经反复测试发现只要触发table表格页面重排，错位就消失了，例如勾选一下选择列，点击刷新按钮重新调下接口重新加载数据，浏览器窗口尺寸编号等。这是因为做这些 *** 作会触发浏览器页面元素重排，重排会导致浏览器重新对页面布局，尺寸进行计算，这时候中间的表格高度也确定了，左右两边重新获取了准确的高度。

解决思路

根据反复测试表格消失的原因，解决思路之一就是如何在代码里面触发表格重排。

试验一

在表格初次渲染完成以后，代码里面用splice手动替换第一条数据

该方法经实验可行。但是经反复不断测试，还是有出现错位的可能。总体来说还是表格渲染比较复杂。分成3个表格后，三个表格是独立渲染的，接收一次数据，中间的表格可能会执行多次，最后一次执行后，表格高度还是会发生变化，而两边的表格却并没有再变化。别问我是如何知道的，浏览器控制台打印三个表格的高度看数据看到的。

试验二

根据方法一试验的结果和获取表格高度数据的分析，进行第二次试验。这次主要改变点就是要不断监听三个表格高度变化情况，确认三个表格高度一致后才定制。准确说是两边的高度和中间的表格高度误差在一个像素以内。这个误差值也是测试观察表格高度数据得出的结论，并且误差在一个之内，肉眼基本看不出错位。
关键代码如下，这段代码放表格渲染的render函数中：

    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(()=>{
        // 解决错位问题，定时检查高度，触发页面重排
        this.updateTableHeight(() => props.dataSource.splice(0, 1, props.dataSource[0]))
      })
    }

在methods中定义updateTableHeight函数。经测试，表格render执行5次后，高度已基本稳定。这里使用定时器监听表格高度变化，当高度误差大于1px时，执行一次重排触发。

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 表格错位的思路。也可以用于element-ui。但是这种思路并不是很好。各位大神，有好的思路吗？