Element-plus el-row el-col 五等分七等分九等分

最新推荐文章于 2025-03-12 20:05:12 发布

直须

最新推荐文章于 2025-03-12 20:05:12 发布

阅读量6k

点赞数 10

文章标签： vue.js 前端 javascript elementui

本文链接：https://blog.csdn.net/qq_40577885/article/details/131461822

版权

在ElementUI的布局组件中，el-col的span属性不支持小数，例如24/5的4.8。为实现这种细分布局，可以通过CSS覆盖默认样式，为el-col设置max-width和flex属性，如将七等分设为14.28571429%，九等分设为11.111111111%。为了避免影响其他组件，需添加特定class进行选择器限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为 el-row 是用 24 来进行划分，当 el-col 的span 使用 24/5 的 4.8来填写时，是不生效的，也就是不支持小数。

<el-row :gutter="20">
  <el-col :span="4.8"></el-col>
</el-row>

可以看到这里的 4.8是没有效果的
在这里插入图片描述
而下面这个4 就是有效果的，那么我们就可以从这里的css来入手，直接写一个覆盖的样式就好了，为了避免影响其它使用el-row的组件，我们可以为其添加一个class

完整代码

<template>
	<el-row :gutter="20" class="input-box">
	  <el-col :span="5">
	    <el-input placeholder="请输入商品编码" />
	  </el-col>
	  <el-col :span="5">
	    <el-input placeholder="请输入商品编码" />
	  </el-col>
	  <el-col :span="5">
	    <el-input placeholder="请输入商品编码" />
	  </el-col>
	  <el-col :span="5">
	    <el-input placeholder="请输入商品编码" />
	  </el-col>
	  <el-col :span="5">
	    <el-input placeholder="请输入商品编码" />
	  </el-col>
	</el-row>
</template>
<style lang="scss">
.input-box {
  .el-col-5 {
    max-width: 20%;
    flex: 0 0 20%;
  }
}
</style>

从上面css代码就可以得出，七等分则为 100/7 ，九等分则为 100/9

<style lang="scss">
.input-box {
  .el-col-7 {
    max-width: 14.28571429%;
    flex: 0 0 14.28571429%;
  }
}

.input-box {
  .el-col-9 {
    max-width: 11.111111111%;
    flex: 0 0 11.111111111%%;
  }
}
</style>