前言

最近碰到一个bug，有一个el-table页面加载的时候会出现行列错位的情况，因为这个表格有着动态表头，所用属性也比较多，百度搜索了一会加上了doLayout方法解决了，doLayout方法可以用来干什么？具体是怎么实现的？我们一起来看下。

方法

doLayout是el-table的一个方法，官网对该方法介绍如下：

QQ图片20230507230352.png 开头提到的错位问题，大概率是因为布局造成的，而该方法能够重新布局，也就解决了这个问题。当组件或子组件大小位置发生变化时，就需要用该方法。下面我们来看下源码是怎么实现的，具体的代码如下：

   props: {
  // ...
  doLayout: {
    type: Boolean,
    default: true
  }
},
watch: {
  // 监听列宽，计算表格布局
  tableLayout () {
    if (this.doLayout) {
      this.debouncedUpdateLayout()
    }
  }
},
methods: {
  // 更新表格布局
  debouncedUpdateLayout: debounce(function () {
    this.updateLayout()
  }, 100),
  updateLayout () {
    this.$nextTick(() => {
      this.layout.updateColumnsWidth()
      this.layout.updateScrollY()
    })
  },
}

从源码我们可以清晰分析出doLayout的实现过程，prop接收daLayout参数，并且用watch进行监听，当daLayout属性为true时，就会调用debouncedUpdateLayout方法。
debouncedUpdateLayout就是用来更新表格布局，而且运用了节流的方式来执行函数updateLayout()，在更新函数中使用了this.$nextTick，让更新在dom元素加载之后执行，确保了布局的稳定性。最后调用了layout组件中的updateColumnsWidth和updateScrollY方法，前者用来更新列宽，后者用来更新滚动条。

updateColumnsWidth:首先计算表格的宽度与每一列的实际宽度，然后判断一下内容宽度与表格宽度看否需要横向滚动条。
updateScrollY:首先获取表格的高度，减去表头与表尾的高度得到表格内容的实际高度。然后对比表格的高度与内容高度，看是否需要加上垂直滚动条。

总结

当组件大小位置发生变化时，可能需要用doLayout去重新计算布局，除了el-table，还有其他组件也支持该方法，比如：el-select、el-tree等组件，开发过程中碰到布局问题可以尝试用该方法解决。

填坑小能手——doLayout方法

前言

方法

总结