使用 Element UI 的 el-col 如何实现 span 超过 24 时元素仍在一行显示？

gzkj8

element-ui el-col如何让元素在span数量超过24时仍然一行显示

在使用element-ui的el-col组件时，可能会遇到需要让多个元素在一行显示的情况。默认情况下，el-col组件的span属性只能接受1到24之间的数字，超过24会自动换行。

对于这个问题，官方文档中并没有提供直接的解决方案。一个可行的办法是自定义el-col组件的行为，取消它的换行限制。

以下步骤可以实现此目的：

• 复制一份el-col组件的代码（可以从element-ui源码中获取）。
• 修改复制后的el-col组件中的islastline属性。这个属性控制了组件是否换行。
• 将修改后的组件注册为一个新的组件，例如el-col-nowrap。
• 在需要使用不换行的el-col组件的地方使用el-col-nowrap组件。
  

修改过的islastline属性可以在el-col组件的validatespan方法中找到。将如下代码添加到validatespan方法的末尾：

1 2 3

if (this.span > 24 && !this.$parent.isGroup) {   this.isLastLine = false; }

使用修改后的el-col-nowrap组件，可以实现让元素在span数量超过24时仍然一行显示。需要注意的是，这个修改仅适用于自定义的el-col-nowrap组件，而原始的el-col组件仍然保留其默认行为。

以上就是使用 Element UI 的 el-col 如何实现 span 超过 24 时元素仍在一行显示？的详细内容