一看就懂！彻底解决el-row下的el-col高度不一致问题！

2023-07-25 17:22:17

告别el-row下的el-col高度不一，3种优雅方案助你一臂之力

在使用Element UI框架开发页面时，经常会遇到el-row下的el-col高度不一致的问题，这会影响页面的美观性和用户体验。为了解决这个问题，本文将介绍三种简单易懂的方法，帮助你轻松应对这种棘手情况。

1. 弹性布局：让列元素自由伸展

Flex布局是一种弹性布局方式，它允许元素在容器中自由伸缩，并根据容器的大小自动调整自己的尺寸。这种布局方式非常适合解决el-row下的el-col高度不一致的问题。

<template>
  <el-row :gutter="10">
    <el-col :span="12" style="background-color: #f5f5f5;">
      第一列内容
    </el-col>
    <el-col :span="12" style="background-color: #ffffff;">
      第二列内容
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      gutter: 10,
    };
  },
};
</script>

2. 最小高度：为列元素设置最低高度

min-height属性可以设置元素的最小高度，这意味着不管容器有多高，元素都不会低于这个高度。利用这个属性，我们可以强制el-col元素保持一致的高度。

<template>
  <el-row :gutter="10">
    <el-col :span="12" style="min-height: 100px; background-color: #f5f5f5;">
      第一列内容
    </el-col>
    <el-col :span="12" style="min-height: 100px; background-color: #ffffff;">
      第二列内容
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      gutter: 10,
    };
  },
};
</script>

3. 显示方式：让列元素垂直排列

display属性可以设置元素的显示方式，将其改为flex并设置flex-direction为column，可以让el-col元素垂直排列，自动撑满容器的高度。

<template>
  <el-row :gutter="10">
    <el-col
      :span="12"
      style="display: flex; flex-direction: column; justify-content: space-between; background-color: #f5f5f5;"
    >
      第一列内容
    </el-col>
    <el-col
      :span="12"
      style="display: flex; flex-direction: column; justify-content: space-between; background-color: #ffffff;"
    >
      第二列内容
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      gutter: 10,
    };
  },
};
</script>