element-ui中el-table根据浏览器的缩放自适应表头宽度和内容展示

etable 设置了heigh或者max-height之后在最开始的界面可以正常滑动看到内容，但是f12或者第一次缩放屏慕的时候他内容最底部不会全部展示有一部分会被遮住，后面在e-table-column添加了fixed="right”虽然解决内容的问题，但是一样f12或者第一次屏幕的时候他的标题head就出问题了如果文字过长，高度不能适应内容会被遮住、继续施拉屏幕宽度的时候前面两个都恢复正常了。只有第一次不可以。

最开始的界面也是正常界面表头：

第一次F12或者修改屏幕宽度之后的表头：内容太长然后换行但是表头的高度却不能自适应然后遮住了内容

第二次拖拉屏幕宽度之后恢复正常：

 

这是因为他的宽度是由js计算的第一次改变浏览器宽度他没办法适应。经过多次研究发现可以通过css来解决

1.首先给所有的 el-table-column 添加 fixed="right"  不然给了固定高度的话表格内容区的底部在修改第一次屏幕宽度会看不到最后一条数据会被遮住。

2.css设置这个给他强行设置自适应就可以第一次修改屏幕宽度的时候达到内容自适应了。

.el-table {
  width: 100%;

  .el-table__header-wrapper table,
  .el-table__body-wrapper table {
    width: 100% !important;
  }

  .el-table__body,
  .el-table__footer,
  .el-table__header {
    table-layout: auto;
  }
}