el-col：如何让超过 24 格的元素一行显示
问题:
您希望让 element-ui 组件中的 el-col 元素在超过 24 格时依然保持在一行显示，并可以通过滚动条查看内容。
解决方法:
由于 el-ui 本身无法实现超过 24 格的一行显示功能，因此需要通过自定义实现。
您可以通过以下步骤自定义实现该功能：
创建自定义容器组件:
import { ref } from '@vue/reactivity';import { onmounted, onunmounted } from '@vue/runtime-core';export default { setup() { const container = ref(null); const scrolltrack = ref(null); const scrollbarhandle = ref(null); const scrollbar = ref(null); let scrollleft = 0; let handleleft = 0; let handlewidth = 0; function updatescrollbar() { if (!container.value || !scrolltrack.value || !scrollbarhandle.value) return; const containerwidth = container.value.clientwidth; const scrolltrackwidth = scrolltrack.value.clientwidth; handlewidth = (containerwidth * scrolltrackwidth) / scrollbar.value.scrollwidth; handleleft = (scrollleft / scrollbar.value.scrollwidth) * scrolltrackwidth; if (handlewidth { const offset = e.clientx - container.value.offsetleft - handlewidth / 2; if (offset scrollbarhandlemaxleft) { offset = scrollbarhandlemaxleft; } const newscrollleft = (offset / scrollbarwidth) * scrollbar.value.scrollwidth; scrollbar.value.scrollleft = newscrollleft; e.preventdefault(); e.stoppropagation(); }; const onhandlemouseup = () => { document.removeeventlistener('mousemove', onhandlemousemove); document.removeeventlistener('mouseup', onhandlemouseup); }; } onmounted(() => { scrollbar.value = scrollbar.value || container.value.parentelement; updatescrollbar(); scrollbar.value.addeventlistener('scroll', onscroll); scrollbarhandle.value.addeventlistener('mousedown', onhandlemousedown); }); onunmounted(() => { scrollbar.value.removeeventlistener('scroll', onscroll); scrollbarhandle.value.removeeventlistener('mousedown', onhandlemousedown); }); return { container, scrolltrack, scrollbarhandle, }; },};.container { display: flex; overflow: hidden; width: 100%; height: 100%;}.scroll-track { position: relative; flex-grow: 1;}.scrollbar-handle { position: absolute; z-index: 100; cursor: pointer;}
使用自定义容器组件:
在您的代码中，用自定义容器组件替换原有的 el-row 组件。
import MyContainer from './MyContainer.vue';export default { components: { MyContainer }};
这样，超过 24 格的元素就会在一行显示，并可以通过滚动条滚动查看。
以上就是Element-UI 中如何实现超过 24 格的元素一行显示并支持滚动？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1631045.html
微信扫一扫 
支付宝扫一扫 
