Element UI el-row el-col实现一行5列-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element UI el-row el-col实现一行5列。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、实现效果

Element UI el-row el-col实现一行5列,Element UI,前端,javascript,vue.js 文章来源地址https://www.toymoban.com/news/detail-696503.html

2、代码

<el-row :gutter="20">
  <el-col :span="5">
    <info-card
      label="装机容量"
      :num="stationInfo.capacity ? stationInfo.capacity : '--'"
      numColor="#15BC83"
      numUnit="kWh"
      :icon="require('@/assets/card/icon_card_cnzgl.png')"
    />
  </el-col>
  <el-col :span="5">
    <info-card
      label="投运时间"
      :num="
        stationInfo.operationTime ? stationInfo.operationTime : '--'
      "
      numColor="#FF811A"
      numUnit="天"
      :icon="require('@/assets/card/icon_card_year.png')"
    />
  </el-col>
  <el-col :span="5">
    <info-card
      label="电池堆数"
      :num="
        stationInfo.batteryNumber ? stationInfo.batteryNumber : '--'
      "
      numColor="#FF811A"
      numUnit="个"
      :icon="require('@/assets/card/icon_card_bnzzs.png')"
    />
  </el-col>
  <el-col :span="5">
    <info-card
      label="电池簇数"
      :num="
        stationInfo.clusterNumber ? stationInfo.clusterNumber : '--'
      "
      numColor="#FF811A"
      numUnit="个"
      :icon="require('@/assets/card/icon_card_bnzzs.png')"
    />
  </el-col>
  <el-col :span="5">
    <info-card
      label="电池节数"
      :num="
        stationInfo.batterySectionNumber
          ? stationInfo.batterySectionNumber
          : '--'
      "
      numColor="#FF811A"
      numUnit="个"
      :icon="require('@/assets/card/icon_card_bnzzs.png')"
    />
  </el-col>
</el-row>

<style lang='less' scoped>
.el-col-5 {
  width: 20%;
}
</style>