开发中遇到这样一个需求，该项目用的是iview UI组件，需求是：
表格列头有一个字段和一个单位，两者样式不同，理想效果如下：“建筑面积四个字为18px、单位（㎡）为16px”。

• 如果按照iview—table表格默认的title属性赋值，那这个字段以及单位的样式就会一样，均为18px。如下图：

• 这时候打开iview官网看到这样一个属性：renderHeader。

• 官方是这样定义的：自定义列头显示内容，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 column 和 index，分别为当前列数据和当前列索引。

• 既然提供了这个属性，那就可以说很方便了，具体怎么使用呢。

1. 注释掉原有的title属性，加上renderHeader，示例代码如下：

{
   // title: '建筑面积（㎡）',
   key: '****', // 对应列内容的字段名
   slot: "****", // 插槽
   width: '110px',
   align: 'center',
   renderHeader: (h, params) => { // Render 函数,自定义列头显示内容
       return h('span',[
         h('span', '建筑面积'),
         h('span', {
           style: {
             color:'#01DAF5',
             fontSize: '16px'
           }
         }, '（㎡）'),
       ])
   },
},

2. 效果如下：

3. 至此，实现效果。