前言

最近在开发一个表格需求，用的是element-ui的el-table组件，开发好了才发现，我的el-table组件宽度无法自适应，一直都是固定的大小。

模拟代码：

    <div class="table-box">
      <div>我是侧边栏1</div>
      <div>我是侧边栏2</div>
      <div>
        <el-table :data="tableData" border>
        </el-table>
      </div>
    </div>

屏幕拉升前：

屏幕拉升后：

难道el-table的宽度没有自适应？ 带着疑问🤔️，我去看了element-ui的demo，它们是可以宽度自适应的。

屏幕拉升前：

屏幕拉升后：

那到底是哪里影响了？

正文

仔细对比两边的样式区别后，最后发现是我设置了flex布局，flex布局影响了。

如果把我的flex布局去掉，el-table是可以自适应的。

那为什么flex布局会影响到el-table的宽度自适应？

我们去看看el-table的源码，看看它是怎么做自适应的。

 // table.vue 
if (this.fit) {
  addResizeListener(this.$el, this.resizeListener);
}
// resize-event.js
import ResizeObserver from 'resize-observer-polyfill';
export const addResizeListener = function(element, fn) {
  if (isServer) return;
  if (!element.__resizeListeners__) {
    element.__resizeListeners__ = [];
    element.__ro__ = new ResizeObserver(resizeHandler);
    element.__ro__.observe(element);
  }
  element.__resizeListeners__.push(fn);
};

通过源码可以看到，el-table是使用了resize-observer-polyfill这个库来监听$el元素(div.el-table)，当$el元素宽度变化时，el-table会重新布局，实现宽度自适应。

resize-observer-polyfill内部是使用了ResizeObserver这个api实现的。

所以核心是监听$el元素的宽度变化。

我们的结构是这样的：

    <div class="table-box">
      <div>我是侧边栏1</div>
      <div>我是侧边栏2</div>
      <div>
        <el-table :data="tableData" border>
        </el-table>
      </div>
    </div>

在flex布局中，如果祖先元素(.table-box)没有设置宽度，el-table的上一级div元素会被el-table的宽度撑开，如果此时el-table的宽度大于祖先元素，就会造成el-table宽度无法自适应。

所以问题的关键是怎么让div不继承el-table的宽度。

解决方案

设置overflow:auto

给el-table的上一级div元素设置overflow:auto。这样它可以继承祖先元素的宽度，然后el-table就算超出，也会有滚动条，达到自适应。

设置position:absolute和width:100%

el-table元素上级再加一个div，设置position:absolute和width:100%。它的上级设置position:relative和width:100%,相对它定位，这样可以继承祖先的宽度。

祖先元素设置固定宽度

如果祖先元素设置了固定宽度，这样子元素都会继承祖先元素的宽度，el-table元素就可以自适应了。

总结

如果大家遇到flex布局下，el-table宽度无法自适应，可以试试这几种解决方案。大家可以根据自己的需求选择。我推荐第一种，它比较灵活，代码也不多，兼容性好。