如何让 Element UI 的 el-col 在超过 24 span 时保持一行显示？

超越 element ui 限制，让 el-col 在超过 24 span 时保持一行显示

你希望 Element UI 的 el-col 超过 24 span 时还能保持在一行显示，并且可以使用浏览器滚动条进行拖动。这是原生组件的限制，但我们可以通过其他方法来实现。

自定义实现

放弃使用 Element UI 的 el-col，自己实现一个类似的功能。你可以使用 CSS Flexbox 或 Grid 来创建自适应布局，使其根据可用空间自动排列元素。例如：

.my-custom-row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll; // 添加滚动条
}

.my-custom-col {
  flex: 1 0 8rem; // 设置最小宽度为 8rem
  margin: 0 1rem; // 添加间距
}

然后，在 Vue 中使用自定义组件：

<template>
  <div class="my-custom-row">
    <my-custom-col></my-custom-col>
    <my-custom-col></my-custom-col>
    ...
  </div>
</template>

<script>
export default {
  components: {
    MyCustomCol: {
      template: `<div>内容</div>`
    }
  }
}
</script>

这样，元素就会保持在一行显示，并且不会超出可用宽度。

以上就是如何让 Element UI 的 el-col 在超过 24 span 时保持一行显示？的详细内容，更多请关注其它相关文章！