How to force a single line to display and add horizontal scroll bars after the span value of Element-UI el-col component exceeds 24?

el-col component of Element-UI will automatically wrap when the sum of span attribute values ​​exceeds 24. If you need to force a single line to display and add horizontal scroll bars, you need to abandon the default layout of el-row and el-col components and use the Flexbox layout instead.

The core problem lies in the default line wrapping behavior of the el-row component. To solve this problem, we set the container containing the el-col component to the Flex layout and disable line breaks, thus enabling forced single-line display. Also, use overflow-x: auto attribute to add horizontal scrollbars to view content beyond the width of the container.

Here is a modified code example:

<template>
  <div style="display: flex; overflow-x: auto;">
    <div class="el-col-wrapper">
      <el-col :span="8"><div class="grid-content bg-purple">8</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light">8</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple">8</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light">8</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple">8</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light">8</div></el-col>
    </div>
  </div>
</template>

<style scoped>
.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  height: 30px;
  display: flex;
  justify-content: center; /* 居中显示数字 */
  align-items: center; /* 居中显示数字 */
  padding: 0 10px; /* 添加内边距 */
}

.el-col-wrapper {
  display: flex;
}
</style>

In this example, we remove the el-row component and use a div as a container to apply display: flex and overflow-x: auto styles. el-col component is still used to set the column width, but they are now arranged horizontally in a Flex container, and there is no line wrapping even if the sum of span values ​​exceeds 24. Added .grid-content style to center the content and add inner margins to make the content easier to read. Through this method, the problem of force a single line to be displayed and horizontal scroll bars after span value of el-col component exceeds 24 can be solved effectively.

The above is the detailed content of How to force a single line to display and add horizontal scroll bars after the span value of Element-UI el-col component exceeds 24?. For more information, please follow other related articles on the PHP Chinese website!