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

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>