新公司建网站网络营销推广公司

        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。但是，使用定位这个解决方案会因此而影响其它页面元素的布局。