Element-UI的el-col組件在span屬性值總和超過24時(shí)會(huì)自動(dòng)換行。如果需要強(qiáng)制單行顯示並添加水平滾動(dòng)條，則需要放棄el-row和el-col組件的默認(rèn)佈局，改用Flexbox佈局。

核心問題在於el-row組件的默認(rèn)換行行為。為了解決這個(gè)問題，我們將包含el-col組件的容器設(shè)置為Flex佈局，並禁用換行，從而實(shí)現(xiàn)強(qiáng)制單行顯示。同時(shí)，使用overflow-x: auto屬性添加水平滾動(dòng)條，以便查看超出容器寬度的內(nèi)容。

以下是一個(gè)修改後的代碼示例：

<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; /* 居中顯示數(shù)字 */
  align-items: center; /* 居中顯示數(shù)字 */
  padding: 0 10px; /* 添加內(nèi)邊距 */
}

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

在這個(gè)例子中，我們移除了el-row組件，並使用一個(gè)div作為容器，應(yīng)用display: flex和overflow-x: auto樣式。 el-col組件仍然用於設(shè)置列寬，但它們現(xiàn)在在一個(gè)Flex容器中水平排列，即使span值總和超過24也不會(huì)換行。 添加了.grid-content樣式，使內(nèi)容居中顯示，並添加了內(nèi)邊距，使內(nèi)容更易於閱讀。 通過這種方法，可以有效地解決el-col組件span值超過24後強(qiáng)制單行顯示並添加水平滾動(dòng)條的問題。

以上是Element-UI el-col組件span值超過24後如何強(qiáng)制單行顯示並添加水平滾動(dòng)條？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！