龙空技术网

vue+element实现表单根据字段值显示不同的颜色

战神联盟go 350

前言:

当前朋友们对“element表格表头颜色”大体比较关切,大家都需要了解一些“element表格表头颜色”的相关内容。那么小编同时在网络上搜集了一些关于“element表格表头颜色””的相关文章,希望大家能喜欢,咱们快快来学习一下吧!

form表单内容

    <el-table v-loading="loading" :data="listPublish" border :cell-style="addClass"  height="780" style="width: 100%" @selection-change="handleSelectionChange">      <el-table-column    type="selection" width="45" align="center" />      <el-table-column    label="序号" width="45" align="center" prop="id" />      <el-table-column    label="迭代或bug名称" width="150" align="center" prop="iteration" />      <el-table-column    label="服务名称" align="center" prop="appname" >  </el-table-column> .........

解释: 在:<el-table> 表单中添加 :cell-style="addClass" 数据绑定

在methods方法中添加函数

   addClass({    row,    //行标记    column,  //列标记    rowIndex,  //行索引    columnIndex //列索引  }){    if (columnIndex == 10) {        if(row.status == 'SUCCESS'){           return 'background:#67C23A';        }        if(row.status== 'FAILURE'){          return 'background:#F40A41';        }        if(row.status== 'UNDO'){          return 'background:#FFFFFF';        }        if(row.status== 'RUNNING'){          return 'background:#409EFF';        }        if(row.status== 'QUEUED'){          return 'background:#FAFE0A';        }        if(row.status== 'ABORTED'){          return 'background:#F56C6C';        }    }    },

标签: #element表格表头颜色