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

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

问题:

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

解决方法:

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

阿里妈妈·创意中心

阿里妈妈营销创意中心

下载

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

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

<template>
  <div>
    <div ref="container">
      <slot v-bind="$attrs" />
    </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>

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

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

<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 格的元素就会在一行显示，并可以通过滚动条滚动查看。