el-table宽度无限延长问题处理

今天遇到一个奇怪现象，使用element-ui处理表格里，当表格里数据为空，视图里的表格宽度在不断拉长，查找原因看到 table有个行内样式width在不断变化，如图

开始我以为是ele-ui官方插件的一个bug，然后在百度上查了一下相关问题，给el-table处理了样式

<style lang="scss" scoped>
// 解决el-table宽度无限拉伸问题, 一定要加scoped, 否则deep无效
::v-deep .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;
    }
}
</style>

本以为理所应当就好了，实际并没彻底解决问题，推敲后发现 table的宽度100%，应该是一个具体的数值，所以我把注意力放到了包裹table的容器里，由于上层div容器需要自适应屏幕宽度，所以容器的样式做了以下处理

<style lang="scss">
.table_box{
    // width: calc(100% - 200px); // 宽度不具体，导致表格无限拉长的关键因素
    width: calc(100vw - 200px); // 将calc(100%)改为calc(100vw)就可以了，原因是vw指屏幕整体宽度度量,这里可以设置成一个具体的值，比如800px
}
</style>

处理好这两步，问题就解决啦，遇到同样问题的小伙伴可以参考一下~