开发中遇到这样一个需求，该项目用的是iview UI组件，需求是： 表格列头有一个字段和一个单位，两者样式不同，理想效果如下：“建筑面积四个字为18px、单位（㎡）为16px”。
如果按照iview—table表格默认的title属性赋值，那这个字段以及单位的样式就会一样，均为18px。如下图：
这时候打开iview官网看到这样一个属性：renderHeader。
官方是这样定义的：自定义列头显示内容，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 column 和 index，分别为当前列数据和当前列索引。
既然提供了这个属性，那就可以说很方便了，具体怎么使用呢。 注释掉原有的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'}}, '（㎡）'),])},},
效果如下： 至此，实现效果。
