vue Render 函数介绍
最近在用elementUI写管理后台的时候，遇到了需要在el-table表头自定义的功能，所以搜索了下vue官网，发现了createElement这个方法；之前在做react native毕设的时候，倒是用到了renderHeader的方法。
- 这是官网关于createElement的简单例子
// @returns {VNode}
createElement(
// {String | Object | Function}
// 一个 HTML 标签字符串，组件选项对象，或者一个返回值类型为String/Object的函数，必要参数
'div',
// {Object}
// 一个包含模板相关属性的数据对象
// 这样，您可以在 template 中使用这些属性.可选参数.
{
// (详情见下一节)
},
// {String | Array}
// 子节点 (VNodes)，由 `createElement()` 构建而成，
// 或简单的使用字符串来生成“文本结点”。可选参数。
[
'先写一些文字',
createElement('h1', '一则头条'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
从例子中可以看到，createElement方法是可以嵌套的
- 实际例子（别人写得fiddle例子）
<template>
<el-table :data="tableData" border style="width: 100%">
<el-table-column inline-template label="日期" width="180" :render-header="renderHeader">
<div>
<el-icon name="time"></el-icon>
<span style="margin-left: 10px">{{ row.date }}</span>
</div>
</el-table-column>
</el-table>
</template>
<script>
data() {
return {
tableData: [{
date: '2016-05-02
}]
}
},
methods: {
renderHeader(createElement, { column }) {
return createElement(
'div',
[
createElement('a', ['==' + column.label + '=='], {
attrs: {
href: '#test'
}
})
]
);
}
}
</script>