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

发布日期： 2024-11-03 阅读量： 作者： 网络

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>

# vue # overflow

上一篇: linux mtd是什么

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

随便看看