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

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

问题:

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

解决方法:

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

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

1. 创建自定义容器组件:

[removed]
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 xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed> {
        const offset = e.clientx - container.value.offsetleft - handlewidth / 2;
        if (offset < scrollbarhandleminleft xss=removed> 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,
    };
  },
};
[removed]

<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>

1. 使用自定义容器组件:

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

[removed]
import MyContainer from './MyContainer.vue';
export default {
  components: { MyContainer }
};
[removed]

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

以上就是Element-UI 中如何实现超过 24 格的元素一行显示并支持滚动？的详细内容，更多请关注慧达安全导航其它相关文章！