Element-UI中el-col的span值超过24如何在一行显示并出现滚动条？

在Element-UI中，el-col组件的span属性用于定义栅格布局中列的宽度。span的最大值是24，表示占据整个容器的宽度。如果你希望在一行中显示多个el-col，并且它们的span总和超过24，可以通过以下方式实现滚动条：

解决方案

1. 使用el-row的flex布局：

   • 将el-row的type属性设置为flex，这样可以让el-row使用Flexbox布局。
   • 设置el-row的wrap属性为nowrap，这样可以让所有el-col在一行内显示，并且不会换行。
   • 设置el-row的overflow-x为auto，这样当内容超出容器宽度时，会出现水平滚动条。

2. 设置el-col的宽度：

   • 由于span的最大值是24，你可以通过设置el-col的width属性来手动控制宽度，使其超过24的宽度。

示例代码

<template>
  <div class="container">
    <el-row type="flex" wrap="nowrap" style="overflow-x: auto;">
      <el-col :span="6" v-for="(item, index) in 10" :key="index" style="min-width: 200px;">
        <div class="grid-content bg-purple">
          {{ item }}
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 数据
    };
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  overflow: hidden;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  background-color: #d3dce6;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

解释

• el-row的type="flex"：使用Flexbox布局，使得el-col可以在一行内排列。
• wrap="nowrap"：防止el-col换行，确保它们在一行内显示。
• overflow-x: auto：当内容超出容器宽度时，显示水平滚动条。
• min-width: 200px：设置el-col的最小宽度，确保每个el-col的宽度足够大，不会因为内容过少而缩小。

注意事项

• 如果你希望el-col的宽度根据内容自适应，可以不设置min-width，但这样可能会导致某些列过窄。
• 如果el-col的内容过多，可能会导致滚动条出现，用户需要手动滚动查看所有内容。

通过这种方式，你可以在Element-UI中实现el-col的span值超过24时，在一行内显示并出现滚动条的效果。