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

Html5 javascript
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.

Previous: The background color of exit is set on the right side of WeChat Mini Programs's title.

Next: How does nginx+php print the error log of php?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu