How to change the color of fonts in iview table components

this is the template code

<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"
                    }
                ]        

clipboard.png

if the font turns red if the age is over 18, how to achieve

May.07,2021

in 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);
                          }
                    }
                },

]


{
            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;
              }
            }
          }

I don't know if it will work.


specific style-sharp
line: you can assign a style name to a row through the attribute row-class-name.

column: you can assign a style to a column by setting the field className to the column columns.

cells: you can assign styles to any cell by setting the field cellClassName to the data data.

there is

in this document.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b370e4-2c06a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b370e4-2c06a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?