iview(View UI)使用 Vue 的 Render 函数，自定义表格列头显示内容（renderHeader）

心已赠人 2022-10-13 02:57 92阅读 0赞

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

![在这里插入图片描述][20210706093704616.jpg_pic_center]

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

![在这里插入图片描述][20210706093742434.jpg_pic_center]

*  这时候打开[iview官网][iview UI]看到这样一个属性：`renderHeader`。
 *  官方是这样定义的：**自定义列头显示内容，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 column 和 index，分别为当前列数据和当前列索引。**

![在这里插入图片描述][20210706093840672.jpg_pic_center]

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

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'
               }
             }, '（㎡）'),
           ])
       },
    },

1.  效果如下：

![在这里插入图片描述][20210706093933593.jpg_pic_center]

1.  至此，实现效果。

[iview UI]: https://www.iviewui.com/components/table
[20210706093704616.jpg_pic_center]: /images/20221005/8844bbd9cc99403db53093f696216a8b.png
[20210706093742434.jpg_pic_center]: /images/20221005/a3631a146b2e405bbaf2b1e193ae243e.png
[20210706093840672.jpg_pic_center]: /images/20221005/3aacb41c5fbc499395ca51f9a2b9c63d.png
[20210706093933593.jpg_pic_center]: /images/20221005/45986bd3f499462dafd33359fae2466e.png