Element UI el-row el-col实现一行5列

1、实现效果

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>