iview table组件自定义表格背景色

table用来展示表格数据很方便,当我们想要将某一行或者某一列或者是某一格的背景色改变,下面是官方的方法

:通过属性 row-class-name 可以给某一行指定一个样式名称。

:通过给列 columns 设置字段 className 可以给某一列指定一个样式。

单元格:通过给数据 data 设置字段 cellClassName 可以给任意一个单元格指定样式

行和列的设置比较简单,可以直接设置,官方也给出了样例





当我们的数据是动态的,行和列仍然能够直接去定义样式,但单元格的样式需要我们根据需求去动态添加

发起请求,获得数据,假设为res.data.list,设置tableData作为接受数据的数组对象,在这里我是通过判断单元格列名sbType的值,添加不同的样式,如果效果没出现,给对应样式加 !important设置优先级

.first{
    background-color:green;
    color:#fff;
}
.second{
    background-color:red;
    color:#fff;
}

for(var i=0;i

 

你可能感兴趣的:(table组件,iview)