如何在 Element UI 的 el-col 中，让元素在超过 24 格时仍保持在一行？-html教程-PHP中文网

如何在 Element UI 的 el-col 中，让元素在超过 24 格时仍保持在一行？

霞舞

发布： 2024-11-03 20:27:42

原创

944人浏览过

如何在 Element UI 的 el-col 中，让元素在超过 24 格时仍保持在一行？

如何在 element ui el-col 中让元素在超过 24 格时仍保持在一行？

Element UI 的 el-col 组件限制总跨度（span）为 24。若超过这个限制，元素会自动换行。不过，我们可以通过自定义实现，让元素在超过 24 格时也保持在一行中。

自定义解决方案：

实现此功能需要自定义 CSS 样式和 JavaScript 处理。

1. CSS 样式：

.el-row--custom {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

登录后复制

这个样式取消了 el-row 的默认换行功能，强制所有元素在一行中排列。

2. JavaScript 处理：

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

我们可以在组件挂载后，使用 JavaScript 计算元素的宽度。如果总宽度超过容器宽度（假设为 960px），则将 el-row 组件自定义样式类名添加到容器上。

mounted() {
  const containerWidth = 960;
  let totalWidth = 0;
  this.$nextTick(() => {
    const children = this.$el.children;
    for (let i = 0; i < children.length; i++) {
      totalWidth += children[i].offsetWidth;
    }
    if (totalWidth > containerWidth) {
      this.$el.classList.add('el-row--custom');
    }
  });
}

登录后复制

应用自定义解决方案：

在 Vue 组件中，将 el-row 组件替换为具有自定义样式类的自定义组件。

<template>
  <div>
    <custom-row :gutter="12">
      <el-col :span="8">...</el-col>
      <el-col :span="8">...</el-col>
      ...
    </custom-row>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    customRow: {
      template: '<el-row class="el-row--custom" :gutter="gutter">'
    }
  },
  props: {
    gutter: {
      type: Number,
      default: 12
    }
  },
  mounted() {
    // ...
  }
});
</script>

登录后复制

注意：此解决方案仅适用于 flex 布局支持的浏览器。

以上就是如何在 Element UI 的 el-col 中，让元素在超过 24 格时仍保持在一行？的详细内容，更多请关注php中文网其它相关文章！