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

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

行：经过属性 row-class-name 能够给某一行指定一个样式名称。

列：经过给列 columns 设置字段 className 能够给某一列指定一个样式。

单元格：经过给数据 data 设置字段 cellClassName 能够给任意一个单元格指定样式

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

<style>
    .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;
    }
</style>
<template>
    <Table :row-class-name="rowClassName" :columns="columns1" :data="data1"></Table>
</template>

<script>
    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 '';
            }
        }
    }
</script>

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

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

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

for(var i=0;i<res.data.list.length;i++){
              if(res.data.list[i].sbType=='0'){
                  that.list.tableData[i].cellClassName={ sbType: 'first'}
              }else{
                  that.list.tableData[i].cellClassName={ sbType: 'second'}
                }
          }