Element-UI el-col组件span值超过24后如何强制单行显示并添加水平滚动条？

Element-UI的栅格布局系统基于24分栏设计，el-col组件的span属性代表该列占据的栏数，默认情况下同一行内所有el-col的span总和超过24时，超出部分会自动换行到下一行。如果我们需要让所有el-col强制在同一行显示，并且当内容宽度超出容器时显示水平滚动条，可以通过调整外层容器和el-col的样式来实现。

核心实现思路

要实现强制单行显示并添加水平滚动条，核心逻辑是让承载el-col的父容器不限制子元素的换行，同时给父容器设置水平滚动属性。具体可以分为两个步骤：

• 修改el-row的默认flex换行规则，允许子元素不换行
• 给el-row的外层容器设置水平滚动，当内容宽度超出时触发滚动条

完整实现代码示例

下面是完整的Vue组件代码示例，包含样式和布局结构：

<template>
  <div class="scroll-container">
    <!-- el-row设置不换行 -->
    <el-row class="no-wrap-row" :gutter="20">
      <el-col :span="8">
        <div class="col-content">列1</div>
      </el-col>
      <el-col :span="8">
        <div class="col-content">列2</div>
      </el-col>
      <el-col :span="8">
        <div class="col-content">列3</div>
      </el-col>
      <el-col :span="8">
        <div class="col-content">列4</div>
      </el-col>
      <el-col :span="8">
        <div class="col-content">列5</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ColScrollDemo'
}
</script>

<style scoped>
/* 外层容器设置水平滚动 */
.scroll-container {
  width: 100%;
  overflow-x: auto;
  padding: 20px;
  background-color: #f5f5f5;
}

/* 覆盖el-row的默认换行规则 */
.no-wrap-row {
  display: flex;
  flex-wrap: nowrap;
  /* 不设置宽度，让内容自然撑开 */
}

/* el-col设置不收缩，保证每个列的宽度按span计算 */
.no-wrap-row .el-col {
  flex-shrink: 0;
}

/* 列内容样式，方便查看效果 */
.col-content {
  height: 100px;
  background-color: #409eff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
</style>

关键样式说明

代码中的几个关键样式作用如下：

• overflow-x: auto：给外层容器设置水平方向自动滚动，当内容宽度超过容器宽度时显示滚动条，否则不显示
• flex-wrap: nowrap：覆盖el-row默认的flex-wrap: wrap属性，禁止子元素换行
• flex-shrink: 0：设置el-col不收缩，保证每个列的宽度严格按照span计算的值显示，不会因为容器宽度不足被压缩

注意事项

在实际使用时需要注意以下几点：

• 如果el-row设置了gutter属性，el-col的实际宽度会包含间距，计算总宽度时需要把间距考虑进去
• 如果页面中有多个这样的布局，建议把相关样式提取到全局样式文件中，避免重复编写
• 如果el-col内部的内容本身有最小宽度，需要确保span计算的总宽度不会小于内容最小宽度，否则可能出现内容溢出的情况

其他可选方案

如果不想修改el-row的flex属性，也可以直接给el-row设置固定宽度，宽度值大于所有el-col的总宽度，然后给外层容器加滚动。示例代码如下：

<template>
  <div class="scroll-container">
    <el-row class="fixed-width-row" :gutter="20">
      <el-col :span="8">
        <div class="col-content">列1</div>
      </el-col>
      <el-col :span="8">
        <div class="col-content">列2</div>
      </el-col>
      <el-col :span="8">
        <div class="col-content">列3</div>
      </el-col>
      <el-col :span="8">
        <div class="col-content">列4</div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.scroll-container {
  width: 100%;
  overflow-x: auto;
  padding: 20px;
}

/* 设置el-row宽度大于所有列总宽度，强制不换行 */
.fixed-width-row {
  width: 1200px; /* 5个span=8的列总span为40，对应宽度约为1200px（假设容器总宽对应24span为720px） */
}

.col-content {
  height: 100px;
  background-color: #67c23a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
</style>

这种方式的缺点是需要根据列的数量手动计算el-row的宽度，不够灵活，更推荐第一种通过flex属性控制换行的方式。

Element-UIel-colspan水平滚动条单行显示修改时间：2026-07-21 03:06:28