Element UI 的 el-row 布局缩放乱位问题剖析

2023-10-28 12:25:31

使用 Element UI 的 el-row 布局时，缩放会导致乱位：原因与解决方法

问题

使用 Element UI 的 el-row 和 el-col 构建布局时，在缩放页面时会出现乱位现象。

问题根源

该问题通常出现在 el-row 的子元素，也就是 el-col 中。这是因为 Element UI 采用 flex 布局，当子元素宽度不足以容纳其内容时，它会自动换行。在缩放过程中，窗口宽度发生变化，导致子元素的宽度不足，从而触发换行，造成布局混乱。

解决方法

1. 调整 flex 布局

为 el-row 设置 flex-wrap: nowrap 属性，强制子元素单行排列，避免换行。

<el-row :style="{ flexWrap: 'nowrap' }">
  <!-- 子元素 -->
</el-row>

2. 设置 min-width

为 el-col 设置 min-width 属性，确保子元素在缩放时始终保持一定的最小宽度，防止内容溢出。

<el-col :style="{ minWidth: '100px' }">
  <!-- 内容 -->
</el-col>

3. 设置 max-width

为 el-col 设置 max-width 属性，限制子元素在缩放时不会超出最大宽度，防止布局变形。

<el-col :style="{ maxWidth: '200px' }">
  <!-- 内容 -->
</el-col>

实例演示

以下是一个使用上述解决方案修复乱位问题的示例：

<template>
  <el-row :style="{ flexWrap: 'nowrap' }">
    <el-col :style="{ minWidth: '100px', maxWidth: '200px' }">
      <!-- 内容 -->
    </el-col>
    <el-col :style="{ minWidth: '100px', maxWidth: '200px' }">
      <!-- 内容 -->
    </el-col>
  </el-row>
</template>