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

针对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;}

  　　　　  }

　　　　}