对表格的行和列以及任意单元格进行状态判断,根据不同状态显示不同颜色

1.對行進行判斷渲染 

js:

 // 狀態
            status_change:function (row) {
               if(row.allow==1){
                   return 'demo-table-info-row';
               }
            },

css:

.demo-table-info-row td{
  color: #2d8cf0;
}

运行结果:

2.對列進行渲染:

js:

columns1:[
{
    title: 'Age',
    key: 'age',
    className: 'demo-table-column'
}
]

css:

.demo-table-cloumn td{
  color: #2d8cf0;
}

任意单元格:

data8: [ 
{
     name: 'yk',
      age: 22, 
     cellClassName: { 
         age: 'demo-table-info-cell-age', 
         name: 'demo-table-info-cell-name' 
        } 
    }
]

css:

  .ivu-table .demo-table-info-cell-name {
        color: #fff;
    }
    .ivu-table .demo-table-info-cell-age {
        background-color: #ff6600;
        color: #fff;
    }

3.對單元格進行判斷渲染,直接在render渲染的時候判斷.

          {
              title: "人力差異",
              key: "cy",
              align: "center",
              render: (h, params) => {
                if( params.row.std.idl2>0){
                  return h(
                    "div",
                    {
                      style:{
                        color:"#f00",
                      }
                    },
                    params.row.std.idl2)
                  );
                }else if( params.row.std.idl2<0){
                  return h(
                    "div",
                    {
                      style:{
                        color:"#0f0",
                      }
                    },
                    params.row.std.idl2)
                  );
                }

              }
            },