Element-UI 中如何实现超过 24 格的元素一行显示并支持滚动？

yixinis

el-col：如何让超过 24 格的元素一行显示

问题:

您希望让 element-ui 组件中的 el-col 元素在超过 24 格时依然保持在一行显示，并可以通过滚动条查看内容。

解决方法:

由于 el-ui 本身无法实现超过 24 格的一行显示功能，因此需要通过自定义实现。

您可以通过以下步骤自定义实现该功能：

• 创建自定义容器组件:
  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114

<template><div>     <div ref="container">       <slot v-bind="$attrs"></slot> </div>     <div ref="scrollbar" style="width: 100%; height: 16px; overflow-x: scroll;">       <div ref="scrolltrack" style="width: 100%; background: #ccc;"></div>       <div ref="scrollbarhandle" style="width: 24px; height: 16px; background: #666; border-radius: 8px; position: absolute; left: 0;"></div>     </div>   </div> </template><script> 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 < 24) {         handlewidth = 24;       }       scrollbarhandle.value.style.width = `${handlewidth}px`;       scrollbarhandle.value.style.left = `${handleleft}px`;     }     function onscroll() {       if (!container.value || !scrolltrack.value || !scrollbarhandle.value) return;       scrollleft = scrollbar.value.scrollleft;       updatescrollbar();     }     function onhandlemousedown(e) {       if (!container.value || !scrolltrack.value || !scrollbarhandle.value) return;       const scrollbarwidth = scrollbar.value.clientwidth;       const handlewidth = scrollbarhandle.value.clientwidth;       const scrollbarhandleminleft = 0;       const scrollbarhandlemaxleft = scrollbarwidth - handlewidth;       e.preventdefault();       e.stoppropagation();       document.addeventlistener('mousemove', onhandlemousemove);       document.addeventlistener('mouseup', onhandlemouseup);       const onhandlemousemove = (e) => {         const offset = e.clientx - container.value.offsetleft - handlewidth / 2;         if (offset < scrollbarhandleminleft) {           offset = scrollbarhandleminleft;         } else 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,     };   }, }; </script><style> .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; } </style>

• 使用自定义容器组件:
  

在您的代码中，用自定义容器组件替换原有的 el-row 组件。

1 2 3 4 5 6 7 8 9 10 11

<template><div>     <mycontainer><el-col :span="8"><div class="grid-content bg-purple"></div>       </el-col><el-col :span="8"><div class="grid-content bg-purple-light"></div>       </el-col><!-- ... 其它内容 --></mycontainer> </div> </template><script> import MyContainer from './MyContainer.vue'; export default {   components: { MyContainer } }; </script>

这样，超过 24 格的元素就会在一行显示，并可以通过滚动条滚动查看。

以上就是Element-UI 中如何实现超过 24 格的元素一行显示并支持滚动？的详细内容