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
