element-plus的el-row怎么实现一行放5个 ?

Question

vue3+element-plus项目, 希望给个例子, 在官网没看到相关例子, 希望可以解答下谢谢

Answer 1

这样就是五个, 只要保证span的值加起来为24就行

  <el-row>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple-light" /></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple-light" /></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="2"><div class="grid-content ep-bg-purple-light" /></el-col>
    <el-col :span="2"><div class="grid-content ep-bg-purple-light" /></el-col>
  </el-row>

Answer 2

因为是 24 格的栅格布局。所以没办法直接等分为 5 份。除非说并不要求为5等份，比如说一楼提到的分6分使用5份，这样的话就也能实现，但是宽度并不是等分的。

---

最简单的就是 row 开启 flex 布局模式之后，摆5个 col 组件 /dog。

我印象中记得 Ele2x 时期是支持小数 span 值的，不知道 Ele+ 有没有支持（可能是某些框架魔改的）。看了一下栅格组件的文档并没有，源码样式中也没有。

你自己增加一下 el-col-4.8 的样式就好了，这样就能直接使用了。

.el-col-4.8 {
  width: 20%;
}