view-ui Table+ vue 单元格内容标红

在项目中表格中可能会有一些需要特殊处理的单元格 那么我们需要怎么实现呢 直接上代码

<template>
    <Table :columns="columns1" :data="data2"></Table>
</template>

 简单的定义一个 通过cellClassName 属性给某个单元格自定义别名

data () {
            return {
                columns1: [
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
                data2: [
                    {
                        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: 'age',
                            address: 'address'
                        }
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                      	cellClassName:{
                      	age:'age1',
                        name:'name'
                    }
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        cellClassName: {
                            name: 'demo-table-info-cell-name'
                        }
                    }
                ]
            }
        },

 通过自定义的 属性名称 进行单独的设置

<style>
    .ivu-table .demo-table-info-cell-name {
        background-color: #2db7f5;
        color: #fff;
    }
    .ivu-table .age {
        background-color: #fff;
        color: red;
    }
    .ivu-table .address {
        background-color: #187;
        color: #fff;
    }
   .ivu-table .name {
        background-color: #555;
        color: #666;
    }
</style>