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%; }