vue 给特定满足条件的表单数据添加背景颜色,组件的 row-class-name

1、:row-class-name="tableRowClassName" 可为表格每行根据后面的函数绑定class名
<!-- 列表框 -->
    <div class="tableList">
      <el-table :data="teamModelListTable"  style="width: 100%"
                @selection-change="handleSelectionChange"
                :row-class-name="tableClassNameRow"
                tooltip-effect="dark"
                id="newGridList"
                ref="gridShouldRespondList">
        <el-table-column
          type="selection"
          :reserve-selection="false"
        ></el-table-column>
        <el-table-column label="序号" type="index" width="100" align="center">
          <template slot-scope="scope">{{
              scope.$index + 1 + pageSize * (currentPage - 1)
            }}
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="feedName" label="反馈人" ></el-table-column>
        <el-table-column show-overflow-tooltip prop="gridName" label="网格名称" ></el-table-column>
        <el-table-column show-overflow-tooltip prop="finishSituation" label="完成情况"></el-table-column>
        <el-table-column show-overflow-tooltip prop="isFinished" label="是否完成"></el-table-column>
      </el-table>
methods: {
    tableClassNameRow(row, rowIndex) {
      console.log(row)
      if (row){
        if (row.isFinished != null || row.isReceived != null ){
          return 'is-finished-filled';
        }else {
          return '';
        }
      }
    },

   ...其他方法
}
 .is-finished-filled {
    background-color: #07e56c !important; /* 高亮颜色,可以根据需求自定义 */
    font-weight: bold; /* 另外一种可能的高亮方式 */
  }

2、效果图

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@百思不得奇解

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值