vue-element-ui中的table 针对于一列中不同的数据添加不同的样式

标签：vue color element nth 字段 important ui table type

针对table中的row中的值给出不同的样式

　解决方案;

　　　　1.在<el-table>标签中添加属性 ；

　　　　　　实例

　　　　　　<el-table         　　　　:data="tableData"         　　　　style="width: 100%"         　　　　height="800"         　　　　@selection-change="handleSelectionChange"         　　　　:row-class-name="tableRowClassName"       　　　　> 　　　　2.利用这个函数进全局的循环，循环出所有的数据进行匹配，返回一个class名称，根据不同的名称，更改不同的样式　　 　　　　　　tableRowClassName({row, rowIndex} ){      　　　　　　 for(let i=0; i<this.tableData.length;i++){            　　　　　　 if(this.tableData[i].jobState =="字段1"){              　　　　　　　　 return 'redStyle'            　　　　　　 }else if(this.tableData[i].jobState =="字段2"){               　　　　　　　　return 'greenStyle'                          　　　　　　 }else if(this.tableData[i].jobState =="字段3"){               　　　　　　　　return 'blueStyle'
            　　　　　　}else if(this.tableData[i].jobState =="字段4" || this.tableData[i].jobState =="字段5"){               　　　　　　　　return 'orangeStyle'            　　　　　　 }         　　　　  }    　　　　 },   　　　　字段1，字段2，字段3，字段4，字段5 就需要进行匹配的字段名称 　　 　　　　redStyle ，greenStyle，blueStyle，orangeStyle 是class名称   　　　　 　　　　::v-deep .redStyle{     　　　　.el-table__cell{      　　　　&:nth-of-type(2){ color: #ff5400 !important;}       　　　   &:nth-of-type(3){ color: #FF1717 !important;}       　　　   &:nth-of-type(6){ color: #ccc !important;}     　　　　}   　　　　} 　　　　::v-deep .greenStyle{   　　　　.el-table__cell{       　　　　&:nth-of-type(2){ color: #0CD09C  !important;}       　　　　&:nth-of-type(3){ color: #0CD09C  !important;}       　　　　&:nth-of-type(6){ color: #0CD09C  !important;}    　　　　} 　　　　} 　　　　::v-deep .blueStyle{     　　　　.el-table__cell{       　　　　&:nth-of-type(2){ color: #5231FF !important;}       　　　　&:nth-of-type(3){ color: #5231FF !important;}       　　　　&:nth-of-type(6){ color: #5231FF !important;}     　　　　} 　　　　} 　　　　::v-deep .orangeStyle{    　　　　.el-table__cell{      　　　　 &:nth-of-type(2){ color: #FF9500 !important;}      　　　　 &:nth-of-type(3){ color: #FF9500 !important;}       　　　　&:nth-of-type(6){ color: #FF9500 !important;}   　　　　  } 　　　　} 　　　　  

标签：vue,color,element,nth,字段,important,ui,table,type
From： https://www.cnblogs.com/rockyjs/p/16598235.html