如何让Element UI栅格系统中同一行相邻单元格的高度自动适应内容？

本文针对Element UI栅格系统中同一行相邻单元格高度不一致的问题，提供有效的解决方案。由于el-col默认高度限制了内部内容，导致内容较多单元格撑高，内容较少单元格高度不变。文章通过移除el-col和span元素的height属性，并设置`align-items: stretch` (或移除该属性，使用默认值)以及`flex-direction: column`等CSS样式，实现同一行单元格高度根据内容自动调整，同时保证内容垂直居中显示，最终解决Element UI栅格系统高度自适应难题。

Element UI栅格系统：让同一行相邻单元格高度自适应内容

在使用Element UI栅格系统时，常常遇到同一行相邻单元格高度不一致的问题：内容较多的单元格撑高，而内容较少的单元格高度不变。本文将提供解决方案。

HTML结构

<el-row class="row"><el-col class="col">上平行度</el-col><el-col class="col">平行度OK/NG</el-col></el-row>

CSS样式

.row {
  border-bottom: solid .0625rem #9c9c9c;
  display: flex;
  /* align-items: center;  移除这行 */
  justify-content: center;

  .col {
    /* height: 100%;  移除这行 */
    display: flex;
    flex-direction: column; /* 添加此行，使内容垂直排列 */
    span:not(:last-child){
      border-right: solid .0625rem #9c9c9c;
    }
    ::v-deep span {
      flex: 1;
      /* height: 100%;  移除这行 */
      word-break: break-all;
      word-wrap: break-word;
      /* height: 23px;  移除这行 */
      /* line-height: 23px;  移除这行 */
      display: flex; /* 添加此行，使label内容垂直居中 */
      align-items: center; /* 添加此行，使label内容垂直居中 */
    }
    .label{
      background-color: #e0e0e0;
      color: #000000;
      font-weight: bold;
      /* height:auto;  移除这行 */
    }
    .value{
      /* height: auto;  移除这行 */
    }
  }
}

问题与解决方案

问题在于el-col的高度限制了内部内容的高度。 通过设置align-items: stretch (或移除该属性，因为默认值就是stretch) 以及移除el-col和span的height属性，让单元格高度根据内容自动调整。 为了使内容垂直居中，我们添加了flex-direction: column和span元素的display: flex; align-items: center;。

通过以上修改，同一行相邻单元格的高度将根据其内容自动调整，并保持内容垂直居中。

本篇关于《如何让Element UI栅格系统中同一行相邻单元格的高度自动适应内容？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！