el-table宽度无限变大问题

最新推荐文章于 2024-11-12 11:22:55 发布

原创最新推荐文章于 2024-11-12 11:22:55 发布 · 3.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #elementui #css

文章讲述了在自定义Layout时遇到el-table无法自动缩放的问题，问题根源可能与父组件的display:flex和flex:1样式有关。后端开发者通过添加特定CSS样式解决了此问题，包括设置table布局为auto和调整宽度为100%。解决方案包括在局部和全局引入相应的样式文件。

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;
}