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

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

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

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

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

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

.ivu-table .demo-table-info-row td{

background-color: #2db7f5;

color: #fff;

}

.ivu-table .demo-table-error-row td{

background-color: #ff6600;

color: #fff;

}

.ivu-table td.demo-table-info-column{

background-color: #2db7f5;

color: #fff;

}

.ivu-table .demo-table-info-cell-name {

background-color: #2db7f5;

color: #fff;

}

.ivu-table .demo-table-info-cell-age {

background-color: #ff6600;

color: #fff;

}

.ivu-table .demo-table-info-cell-address {

background-color: #187;

color: #fff;

}

export default {

data () {

return {

columns1: [

{

title: 'Name',

key: 'name'

},

{

title: 'Age',

key: 'age',

className: 'demo-table-info-column'

},

{

title: 'Address',

key: 'address'

}

],

data1: [

{

name: 'John Brown',

age: 18,

address: 'New York No. 1 Lake Park'

},

{

name: 'Jim Green',

age: 25,

address: 'London No. 1 Lake Park',

cellClassName: {

age: 'demo-table-info-cell-age',

address: 'demo-table-info-cell-address'

}

},

{

name: 'Joe Black',

age: 30,

address: 'Sydney No. 1 Lake Park'

},

{

name: 'Jon Snow',

age: 26,

address: 'Ottawa No. 2 Lake Park',

cellClassName: {

name: 'demo-table-info-cell-name'

}

}

]

}

},

methods: {

rowClassName (row, index) {

if (index === 1) {

return 'demo-table-info-row';

} else if (index === 3) {

return 'demo-table-error-row';

}

return '';

}

}

}

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

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

.first{

background-color:green;

color:#fff;

}

.second{

background-color:red;

color:#fff;

}

for(var i=0;i

if(res.data.list[i].sbType=='0'){

that.list.tableData[i].cellClassName={ sbType: 'first'}

}else{

that.list.tableData[i].cellClassName={ sbType: 'second'}

}

}