Element-UI el-col组件span值超24后如何强制在一行显示并使用滚动条？

在Element-UI中，el-col组件的span属性用于定义栅格布局中列的宽度，其最大值为24。如果你将span值设置为超过24，Element-UI会自动将其换行显示。如果你希望强制在一行显示并使用滚动条，可以通过以下方式实现：

解决方案

1. 使用flex布局：将el-row设置为flex布局，并通过white-space: nowrap和overflow-x: auto来实现水平滚动。

2. 自定义样式：通过自定义样式来覆盖Element-UI的默认样式，确保el-col不会换行。

示例代码

<template>
  <div class="container">
    <el-row class="row" type="flex" :gutter="20">
      <el-col :span="30" v-for="(item, index) in 10" :key="index" class="col">
        <div class="grid-content bg-purple">
          {{ index + 1 }}
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'CustomGrid',
};
</script>

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

.row {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.col {
  flex: 0 0 auto;
  width: auto; /* 或者根据需要设置固定宽度 */
}

.grid-content {
  min-height: 100px;
  background-color: #d3dce6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}
</style>

解释

• container：外层容器设置了overflow-x: auto，当内容超出容器宽度时，会出现水平滚动条。
• row：el-row设置为flex布局，并通过flex-wrap: nowrap和white-space: nowrap确保子元素不会换行。
• col：el-col设置为flex: 0 0 auto，确保每个列不会自动调整宽度，保持固定宽度或根据内容自适应。

注意事项

• 由于el-col的span属性最大值为24，如果你需要更大的宽度，建议直接使用width属性或通过CSS自定义宽度。
• 这种方法适用于需要水平滚动条的场景，如果内容过多，可能会导致页面布局复杂，建议根据实际需求调整。

通过这种方式，你可以实现el-col组件在span值超过24时强制在一行显示，并使用滚动条来查看超出部分的内容。