span屬性値が24を超えると、Element-UIのel-colコンポーネントは自動(dòng)的にラップします。単一の行を強(qiáng)制的に表示して水平スクロールバーを追加する必要がある場合は、 el-rowおよびel-colコンポーネントのデフォルトレイアウトを放棄し、代わりにFlexBoxレイアウトを使用する必要があります。

コアの問題は、 el-rowコンポーネントのデフォルトラインラッピング動(dòng)作にあります。この問題を解決するために、 el-colコンポーネントを含むコンテナをフレックスレイアウトに設(shè)定し、ラインブレークを無効にして、強(qiáng)制シングルラインディスプレイを可能にします。また、 overflow-x: auto屬性を使用して、水平スクロールバーを追加して、コンテナの幅を超えたコンテンツを表示します。

これが修正されたコードの例です。

<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>

この例では、 el-rowコンポーネントを削除し、 divをコンテナとして使用してdisplay: flex and overflow-x: auto Styles。 el-colコンポーネントは列の幅を設(shè)定するためにまだ使用されていますが、現(xiàn)在はフレックスコンテナに水平に配置されており、 span値の合計(jì)が24を超えてもラインラッピングはありません.grid-contentコンテンツの中央に追加され、內(nèi)部マージンを追加してコンテンツを読みやすくします。この方法により、 el-colコンポーネントのspan値が24を超えた後の単一の線を表示する力と水平スクロールバーの問題を効果的に解くことができます。

以上がElement-UI EL-COLコンポーネントのSPAN値が24を超える後、水平スクロールバーを表示および追加するように単一の線を強(qiáng)制する方法は？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。