Element UI 表格el-table宽度不能自适应的问题解决方法

        Element UI 表格el-table宽度在渲染完成后就固定了，这时如果窗口宽度发生改变，就会发现表格的宽度并没有跟随窗口大小自适应，会超出原来的容器大小。

       解决方案是将 el-table 包裹在一个父容器中，通过父容器宽度大小的变化就可以影响 el-table 的宽度，使其自适应。

如：

<template>
  <div class="element-table-layout">
    <H1>测试Element UI的Table组件</H1>
    <div class="my-table-wrapper">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" min-width="180"/>
        <el-table-column prop="name" label="Name" min-width="120"/>
        <el-table-column prop="address" label="Address" min-width="320"/>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]
</script>

<style lang="scss" scoped>
.element-table-layout {

  .my-table-wrapper {
    width: calc(100% - 10px);
  }

}
</style>

       在这里我给父容器加了一个宽度的计算：width: calc(100% - 10px)，通过使用百分之百随便减去一个值来实现，也可以使用其它的属性，只要能达到效果。

另一种解决方案是：

       通过定位的调整来实现。让table的父布局CSS定位：position: relative; 再将 el-table使用绝对定位：position: absolute。但是，使用定位这个解决方案会因此而影响其它页面元素的布局。