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'}
                }
          }