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

时间:2024-07-18 17:53:29
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、效果图