element-ui 中 el-col 组件如何实现元素数量超过 24 时保持单行显示？

element-ui el-col 如何在元素数量超过 24 时保持单行显示

在使用 element-ui 的 el-col 组件时，如果元素数量超过 24，默认会换行显示。对于希望所有元素保持单行显示并通过滚动条查看的情况，可以使用以下方法：

方法：自实现布局

由于 element-ui 自身不支持超出 24 后的单行显示，因此需要自行实现布局。代码示例如下：

<template>
  <div>
    <div class="grid-wrapper">
      <div
        v-for="item in list"
        :key="item.id"
        style="display: inline-block; min-width: 200px; margin: 0 20px 0 0;"
      >
        <div class="grid-content" :class="item.class">{{ item.name }}</div>
      </div>
    </div>
    <div
      style="
        position: absolute;
        left: calc(100% + 20px);
        top: 0;
        bottom: 0;
        width: 15px;
      "
    >
      <div class="scrollbar-wrapper">
        <div class="scrollbar" ref="scrollbar"></div>
      </div>
    </div>
  </div>
</template>

<script>
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);
  },
};
</script>

<style>
.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;
}
</style>

在该示例中，我们使用了 overflow: auto 和 min-width 属性，确保元素在超出容器宽度时自动换行并表现为一行布局。并通过 @vueuse/core 的 useScrollbar 插件实现了一个滚动条。你也可以根据自己的实际需求对样式和布局进行调整。

以上就是element-ui 中 el-col 组件如何实现元素数量超过 24 时保持单行显示？的详细内容，更多请关注其它相关文章！