怎么改变iview table组件字体的颜色

Question

这是template 代码

<v-table ref="vTable" :tableColumns="tableColumns" :tableData="tableData"></v-table>  组件
tableColumns: [
                { title: '姓名',  key: 'name', align: "center", width: 200  },
                { title: '性别', key: 'gender', align: "center", width: 100 },
                { title: '年龄',  key: 'age', align: "center", width: 100 },
                { title: '身高',  key: 'height', align: "center", width: 100  },
                { title: '体重',  key: 'weight', align: "center", width: 100  },
                { title: '手机号',  key: 'phone', align: "center" },
                { title: '身份证',  key: 'idCard', align: "center" },
                { title: '家庭住址',  key: 'address', align: "center" },
                { title: '录入时间',  key: 'date', align: "center" },
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: { type: 'primary', size: 'small' },
                                style: { marginRight: '5px' },
                                on: {
                                    click: () => {
                                        
                                    }
                                }
                            }, '查看')
                        ]);
                        
                    }
                }
            ],
    tableData: [
                    {
                        name: '哎哎哎', 
                        gender: '男',
                        age: '18',
                        height: '210cm',
                        weight: '110kg',
                        phone: '12345678912',
                        idCard: '123456789123456',
                        address: '广东省深圳市南山区',
                        date: '2018-08-28'
                    }
                ]        
变成这样子

假如年龄超过18的话字体就变成红色，请问怎么实现

Answer 1

{
            title: '年龄',  
            key: 'age', 
            align: "center", 
            width: 100,
            render: (h, params) => {
              if (params.row.age >= 18) {
                return h('span', params.row.age);//给这个span写样式设置文字颜色
              } else {
                return  params.row.age;
              }
            }
          }

不知道能不能行。。。

Answer 2

在 tableColumns：[

{ title: '年龄',  key: 'age', align: "center", width: 100,
                    render: (h, params) => {
                        if (params.row.age > 18) {
                            return h('span', {
                                style: { color: 'red' },
                            },params.row.age);
                        } else {
                            return  h('span', params.row.age);
                          }
                    }
                },

]

Answer 3

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

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

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

这个文档里面有