el-table宽度无限变大问题

最新推荐文章于 2024-05-15 11:07:50 发布

o0麦嘎

最新推荐文章于 2024-05-15 11:07:50 发布

阅读量2.5k

点赞数 1

文章标签： vue.js 前端 javascript elementui css

本文链接：https://blog.csdn.net/Gpointy/article/details/130144918

版权

1. 前言

自己搭建了一个Layout，整体结构如下：
Layout.vue
在这里插入图片描述

2. 问题

① 点击收起图标，再展开，el-table无法再自动缩放
② 滚轮缩小浏览器屏幕，再放大，el-table无法再自动缩放
如下：
在这里插入图片描述

3. 问题原因

网上搜的原因基本上都说是跟父组件的样式display:flex和flex:1有关，因为我是主做后端的，其中的原理不知道是啥，不过网上说的应该是对的。如果有前端大神能讲明白其中的逻辑，请不吝告知下^^
在这里插入图片描述

4. 问题解决

① 在使用el-table页面中添加以下样式：
在这里插入图片描述

<style lang="less" scoped>
// 解决el-table宽度无限拉伸问题
::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>

② 全局解决
创建/src/assert/style/index.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;
}