So erzwingen Sie eine einzelne Linie zum Anzeigen und Hinzufügen horizontaler Bildlaufleisten, nachdem der Spannwert der Element-UI-EL-Col-Komponente 24 überschreitet?

el-col Komponente von Element-UI wickelt automatisch ein, wenn die Summe der span Attributwerte 24 überschreitet. Wenn Sie eine einzelne Zeile zum Anzeigen und Hinzufügen horizontaler Scroll-Balken erzwingen müssen, müssen Sie das Standardlayout el-row und el-col Komponenten aufgeben und stattdessen das Flexbox-Layout verwenden.

Das Kernproblem liegt im Standard-Verpackungsverhalten der el-row -Komponente. Um dieses Problem zu lösen, setzen wir den Container, der die el-col Komponente enthält, auf das Flex-Layout und die Deaktivierungsleitungsbrüche, wodurch erzwungene Einzellinienanzeige ermöglicht wird. Verwenden Sie auch overflow-x: auto Attribut, um horizontale Scrollbars hinzuzufügen, um Inhalte über die Breite des Containers hinaus anzuzeigen.

Hier ist ein geänderter Code -Beispiel:

<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 diesem Beispiel entfernen wir die el-row -Komponente und verwenden einen div als Container, um display: flex und overflow-x: auto Stile. el-col Komponente wird weiterhin verwendet, um die Säulenbreite einzustellen, sie sind jedoch jetzt horizontal in einem Flex-Behälter angeordnet, und es gibt keine Zeilenverpackung, selbst wenn die Summe span Werte 24 überschreitet. .grid-content Style, um den Inhalt zu zentrieren und innere Ränder hinzuzufügen, um den Inhalt leichter zu lesen. Durch diese Methode kann das Problem einer einzelnen Zeile, die angezeigt werden soll, und horizontale Scrollbalken nach span Spannwert el-col Komponente können 24 effektiv gelöst werden.

Das obige ist der detaillierte Inhalt vonSo erzwingen Sie eine einzelne Linie zum Anzeigen und Hinzufügen horizontaler Bildlaufleisten, nachdem der Spannwert der Element-UI-EL-Col-Komponente 24 überschreitet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!