elementui溢出

解决 ElementUI 溢出问题的方法

滚动条处理
在容器元素上添加 overflow: auto 或 overflow-y: auto，确保内容超出时自动显示滚动条。适用于表格、对话框等组件。

.el-table__body-wrapper {
  overflow-y: auto;
  max-height: 400px;
}

弹性布局限制高度
结合 Flexbox 布局和固定高度，防止子元素无限扩展。例如在 el-container 中限制侧边栏高度：

.el-aside {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

表格固定列优化
当使用 el-table 的固定列功能时，为表格外层容器设置明确宽度，避免横向溢出：

<div style="width: 100%; overflow-x: auto">
  <el-table :data="tableData" style="width: 1200px">
    <el-table-column prop="date" label="日期" fixed width="150"></el-table-column>
    <!-- 其他列 -->
  </el-table>
</div>

对话框内容溢出
调整 el-dialog 的 body 部分样式，限制最大高度并启用滚动：

.el-dialog__body {
  max-height: 70vh;
  overflow-y: auto;
  padding: 20px;
}

响应式断点处理
通过媒体查询针对不同屏幕尺寸调整溢出行为：

@media (max-width: 768px) {
  .el-form-item__content {
    overflow-x: auto;
    white-space: nowrap;
  }
}

文本截断处理
对可能超长的文本内容使用省略号显示：

.el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}