最近在用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>