鍍金池/ 問答/HTML5  HTML/ 怎么改變iview table組件字體的顏色

怎么改變iview table組件字體的顏色

這是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: '廣東省深圳市南山區(qū)',
                        date: '2018-08-28'
                    }
                ]        
變成這樣子

clipboard.png

假如年齡超過18的話字體就變成紅色，請問怎么實現(xiàn)

回答
編輯回答
熊出沒

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

]

2017年9月12日 13:35
編輯回答
過客

特定樣式 #
行：通過屬性 row-class-name 可以給某一行指定一個樣式名稱。

列：通過給列 columns 設(shè)置字段 className 可以給某一列指定一個樣式。

單元格：通過給數(shù)據(jù) data 設(shè)置字段 cellClassName 可以給任意一個單元格指定樣式。

這個文檔里面有

2017年11月9日 22:10
編輯回答
執(zhí)念
{
            title: '年齡',  
            key: 'age', 
            align: "center", 
            width: 100,
            render: (h, params) => {
              if (params.row.age >= 18) {
                return h('span', params.row.age);//給這個span寫樣式設(shè)置文字顏色
              } else {
                return  params.row.age;
              }
            }
          }

不知道能不能行。。。

2017年4月1日 01:08