多读多写多记录,多学多练多思考。---------- 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>

Logo

前往低代码交流专区

更多推荐