Element-ui的el-col組件在span屬性值總和超過24時會自動換行。如果需要強制單行顯示并添加水平滾動條，則需要放棄el-row和el-col組件的默認布局，改用flexbox布局。
核心問題在于el-row組件的默認換行行為。為了解決這個問題，我們將包含el-col組件的容器設置為flex布局，并禁用換行，從而實現強制單行顯示。同時，使用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; /* 居中顯示數字 */ align-items: center; /* 居中顯示數字 */ padding: 0 10px; /* 添加內邊距 */ } .el-col-wrapper { display: flex; } </style>
在這個例子中，我們移除了el-row組件，并使用一個div作為容器，應用display: flex和overflow-x: auto樣式。 el-col組件仍然用于設置列寬，但它們現在在一個Flex容器中水平排列，即使span值總和超過24也不會換行。 添加了.grid-content樣式，使內容居中顯示，并添加了內邊距，使內容更易于閱讀。 通過這種方法，可以有效地解決el-col組件span值超過24后強制單行顯示并添加水平滾動條的問題。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
