elementUI使用el-card高度自适应

<el-row type="flex">
      <el-col :span="4" v-for="(item, index) in list" :key="index" :offset="index > 0 ?1 : 0">
        <el-card v-if="item.bankName" :body-style="{ padding: '0px' }">
          <div style="padding: 14px;">
            <div class="title">{{item.bankName}}</div>
            <div class="sub-title">{{item.cardType}}</div>
            <div class="text-no">{{item.bankCardNo}}</div>
            <div class="bottom clearfix">
              <el-button type="text" class="button" @click="deleteCount">删除</el-button>
              <el-button type="text" class="button" @click="checkMsg(item)">查看</el-button>
            </div>
          </div>
        </el-card>
        <el-card v-else class="el-card-define">
          <div class="add-btn" @click="addRealCountHandle">
            <div class="icon-block">
              <svg-icon icon-class="add-icon" />
            </div>
            <div>添加银行账户</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
.el-card-define {
  min-height: 100%;
  height: 100%;
}
.el-card-define >>> .el-card__body {
  height: 100%;
}

 

posted @ 2020-09-10 19:19  哒哒阿  阅读(25760)  评论(0编辑  收藏  举报