VUE el-table标签使符合条件的行高亮显示
多读多写多记录,多学多练多思考。---------- Banuit Gang(香柚帮)应用场景:库存管理》每种耗材库存设置一个预警值,当耗材库存结余数量小于预警值的时候,使这一种耗材所在行背景显示成黄色。el-tabel标签中使用:row-class-name="tableRowClassName"<el-tablev-loading="loading":data="dataList"bor
·
多读多写多记录,多学多练多思考。---------- Banuit Gang(香柚帮)
应用场景:库存管理》每种耗材库存设置一个预警值,当耗材库存结余数量小于预警值的时候,使这一种耗材所在行背景显示成黄色。
el-tabel标签中使用:row-class-name="tableRowClassName"
<el-table
v-loading="loading"
:data="dataList"
border
style="width: 100%"
:max-height="clientHeight - 142"
:row-class-name="tableRowClassName"
show-summary
:summary-method="getSummaries"
>
<el-table-column label="耗材名称" prop="moName" min-width="180" show-overflow-tooltip fixed="left"></el-table-column>
<el-table-column label="规格型号" prop="spec" min-width="110" show-overflow-tooltip></el-table-column>
<el-table-column label="生产厂商" prop="brand" min-width="110" show-overflow-tooltip></el-table-column>
<el-table-column label="入库数量" prop="inNum" min-width="80"></el-table-column>
<el-table-column label="出库数量" prop="outNum" min-width="80"></el-table-column>
<el-table-column label="报损数量" prop="lossNum" min-width="80"></el-table-column>
<el-table-column label="结存数量" prop="balanceNum" min-width="80"></el-table-column>
<el-table-column label="盘点数量" prop="inventoryNum" min-width="80"></el-table-column>
<el-table-column label="操作" width="120" fixed="right">
<template slot-scope="{ row }">
<el-button @click.native.prevent="openAvDialog(row)" class="fc-blue" type="text">预警值</el-button>
<el-button @click.native.prevent="detail(row)" class="fc-blue" type="text">明细</el-button>
</template>
</el-table-column>
</el-table>
tableRowClassName方法
<script>
tableRowClassName({ row, rowIndex }) {
if(this.$isNotEmpty) {
if (row.balanceNum < row.alarmValue) {
return 'row-row';
}
}
return '';
}
</script>
返回的className,"row-row"
<style>
.el-table .row-row {
background-color: #FFFF00 !important;
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)