element-ui el-col 如何在元素数量超过 24 时保持单行显示
在使用 element-ui 的 el-col 组件时，如果元素数量超过 24，默认会换行显示。对于希望所有元素保持单行显示并通过滚动条查看的情况，可以使用以下方法：
方法：自实现布局
由于 element-ui 自身不支持超出 24 后的单行显示，因此需要自行实现布局。代码示例如下：
import { ref } from "vue";import { useScrollbar } from "@vueuse/core";export default { data() { return { list: [ { id: 1, name: "Item 1", class: "bg-purple" }, { id: 2, name: "Item 2", class: "bg-purple-light" }, { id: 3, name: "Item 3", class: "bg-purple" }, { id: 4, name: "Item 4", class: "bg-purple-light" }, { id: 5, name: "Item 5", class: "bg-purple" }, { id: 6, name: "Item 6", class: "bg-purple-light" }, { id: 7, name: "Item 7", class: "bg-purple" }, { id: 8, name: "Item 8", class: "bg-purple-light" }, { id: 9, name: "Item 9", class: "bg-purple" }, { id: 10, name: "Item 10", class: "bg-purple-light" }, { id: 11, name: "Item 11", class: "bg-purple" }, { id: 12, name: "Item 12", class: "bg-purple-light" }, { id: 13, name: "Item 13", class: "bg-purple" }, { id: 14, name: "Item 14", class: "bg-purple-light" }, { id: 15, name: "Item 15", class: "bg-purple" }, { id: 16, name: "Item 16", class: "bg-purple-light" }, { id: 17, name: "Item 17", class: "bg-purple" }, { id: 18, name: "Item 18", class: "bg-purple-light" }, { id: 19, name: "Item 19", class: "bg-purple" }, { id: 20, name: "Item 20", class: "bg-purple-light" }, { id: 21, name: "Item 21", class: "bg-purple" }, { id: 22, name: "Item 22", class: "bg-purple-light" }, { id: 23, name: "Item 23", class: "bg-purple" }, { id: 24, name: "Item 24", class: "bg-purple-light" }, ], scrollbar: null, }; }, mounted() { this.scrollbar = useScrollbar(this.$refs.scrollbar); },};.grid-wrapper { overflow: auto; padding: 20px;}.grid-content { padding: 8px; border-radius: 4px;}.bg-purple { background: #d3dce6;}.bg-purple-light { background: #e5e9f2;}.scrollbar-wrapper { background: #eee; border-radius: 6px;}.scrollbar { height: 100%; width: 4px; background: #ccc; border-radius: 3px;}{{ item.name }}
登录后复制
在该示例中，我们使用了 overflow: auto 和 min-width 属性，确保元素在超出容器宽度时自动换行并表现为一行布局。并通过 @vueuse/core 的 useScrollbar 插件实现了一个滚动条。你也可以根据自己的实际需求对样式和布局进行调整。
以上就是element-ui 中 el-col 组件如何实现元素数量超过 24 时保持单行显示？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2806066.html
