四时宝库

程序员的知识宝库

vue+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';
        }
    }
    },

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接