
element-ui el-col 如何在元素数量超过 24 时保持单行显示
在使用 element-ui 的 el-col 组件时,如果元素数量超过 24,默认会换行显示。对于希望所有元素保持单行显示并通过滚动条查看的情况,可以使用以下方法:
方法:自实现布局
由于 element-ui 自身不支持超出 24 后的单行显示,因此需要自行实现布局。代码示例如下:
{{ item.name }}
在该示例中,我们使用了 overflow: auto 和 min-width 属性,确保元素在超出容器宽度时自动换行并表现为一行布局。并通过 @vueuse/core 的 useScrollbar 插件实现了一个滚动条。你也可以根据自己的实际需求对样式和布局进行调整。










