iview（ViewUI）使用Vue的Render函数，自定义表格列头显示内容（rende。。。

iview（ViewUI）使⽤Vue的Render函数，⾃定义表格列头显⽰内容（rende。

。。

开发中遇到这样⼀个需求，该项⽬⽤的是，需求是：

表格列头有⼀个字段和⼀个单位，两者样式不同，理想效果如下：“建筑⾯积四个字为18px、单位（㎡）为16px”。

童装论坛

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

妇科学这时候打开看到这样⼀个属性：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'

}

730矿},'（㎡）'),

])

海选2. 效果如下：

3. ⾄此，实现效果。

本文发布于:2024-09-22 10:30:20，感谢您对本站的认可！

标签：属性效果列头定义内容样式表格遇到

留言与评论（共有 0 条评论）