基于VueJS的render渲染函数打造一款非常强大的IView 的Table组件

1、render渲染函数的介绍

字符串模板的代替方案，允许你发挥 Javascript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。

2、如何使用render函数？
下面是vue官网的例子

var getChildrenTextContent = function (children) {   return children.map(function (node) {     return node.children       ? getChildrenTextContent(node.children)       : node.text   }).join('') } Vue.component('anchored-heading', {   render: function (createElement) {     // 创建 kebabCase 风格的ID     var headingId = getChildrenTextContent(this.$slots.default)       .toLowerCase()       .replace(/W+/g, '-')       .replace(/(^-|-$)/g, '')     return createElement(       'h' + this.level,       [         createElement('a', {           attrs: {             name: headingId,             href: '#' + headingId           }         }, this.$slots.default)       ]     )   },   props: {     level: {       type: Number,       required: true     }   } })

3、iview table组件介绍

主要用于展示大量结构化数据。
支持排序、筛选、分页、自定义操作、导出 csv 等复杂功能。

4、iview table组件的使用

渲染成如下表格：

5、iview table render函数和renderHeader介绍

render:

自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。 学习 Render 函数的内容

renderHeader:

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

6、iview table render函数的使用

渲染成如下table

7、iview render和renderHeader结合自定义组件，渲染table表格

QiDropdown.vue组件代码如下:

 .dd{     & .ivu-select-dropdown{         max-height: 100% !important;     }     & .ivu-select-dropdown{         max-height: 100% !important;     }     & >.ddm{         text-align: left;         font-weight:normal;         & .active{             color:#008cee         }     }     }   

8、父组件引入QiDropdown组件并应用到table 的render和renderHeader函数中

import QiDropdown from '@/components/QiDropdown' export default {     name: 'email-list',     components:{         QiDropdown     }, ... columns: [                 {                     title: '标注',                     key: 'callout',                     align:'center',                     renderHeader:(h,params)=>{                         return h(QiDropdown,{                             props:{                                                                 placement:'bottom-start',                                 showArrow:true,                                 content:'标注',                                 data:this.flags                             },                             on:{                                 'on-choosed':(value)=>{                                             this.queryForm.callout = value;                                                                 this.getResumeFromEmailBy();                                 }                             }                         });                     },                     render:(h,params)=>{                         return h(QiDropdown,{                                 props:{                                     content:params.row.callout||'',                                     data:this.flags.slice(1)                                 },                                 on:{                                     'on-choosed':(value)=>{                                         this.choosedFlag(params.row.id,value);                                         }                                 }                             },[                                  h('DropdownItem',                                 {                                     slot: 'diy',                                     style:{                                         color:'#2d8cf0'                                     },                                     props:{                                         name:'add',                                         divided:true                                     }                                 },                                  '添加并标注'),                                 h('DropdownItem',                                 {                                     slot: 'diy',                                     style:{                                         color:'#2d8cf0'                                     },                                     props:{                                         name:'clear'                                     }                                 },                                  '清除该标注')                             ]);                                              }                 },                  ...

渲染成如下所示：

9、总结：
1）有了render函数加上自定义组件，那么你再也不怕iview table组件功能的单调了，一开始我也以为iview table功能太少，现在有了它，你可以实现你任何想实现的表格了，非常简单！

2）iview Dropdown组件上一定要加 transfer 属性，否则它不能正常显示出来

3）render函数可以使用slot，如我的QiDrowdown组件里面有一个slot name=diy，那它在render函数里面就是要写到QiDrowdownr 数组中，如：

h(QiDrowdown, {//这里写QiDrowdown属性props、事件on、样式style等等}, [//这里可以写slot组件，也可以是其它组件，如果是slot你要这样写：     h('DropdownItem',                                 {                                     slot: 'diy',//记住这里要写上QiDrowdown组件slot的name                                     style:{                                         color:'#2d8cf0'                                     },                                     props:{                                         name:'add',                                         divided:true                                     }                                 },                                  '添加并标注'),                                  这样渲染就等于是这样写：        ])

10、引用
1）vue Render中slots的使用
2）渲染函数 & JSX