在html5頁面中，我們知道設(shè)置元素樣式的方法有2種：一種是直接在元素標(biāo)簽中添加style屬性并設(shè)置樣式，另一種是給元素添加class屬性然后給class屬性設(shè)置樣式。既然原生的html頁面有這兩種設(shè)置屬性的方式，那么iview的render函數(shù)當(dāng)然也可以這么給元素添加樣式啦。

render函數(shù)添加樣式的兩種方法：

比如我想設(shè)置字體的顏色大小間距，如下圖：

image.png

第一種方法：直接設(shè)置style屬性

“操作”列的render函數(shù)如下代碼：

 {
            title: '操作',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('span', {
                  style:{
                    fontSize: '14px',
                    padding: '5px 10px',
                    cursor: 'pointer',
                    color: '#fc1'
                  }
                }, '查看'),
              ]);
            }
          }

第二種方法：給元素設(shè)置class屬性

image.png

如果我想在鼠標(biāo)移動到 “查看” 時改變字體的顏色，那么就可以在.show后面加偽類，而第一種方法就做不到了，實現(xiàn)如下：

image.png

class屬性的其他用法

class屬性有兩種用法：
1.當(dāng)類名是字符串時(如上面的的第二種方法):

 h('span', {
      class:'show'
 }, '查看')

也可以綁定多個樣式

 h('span', {
      class:'show isbule'
 }, '查看')

2.當(dāng)類名是對象時:

 h('span', {
  class:{
      'show':true,
      'iscolor':true
  }
}, '查看'),

當(dāng)然你也可以style和class屬性一起使用啦。