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、效果图

# vue.js # javascript # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue