vue tendet函數簡單分享

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

參考文章

https://github.com/ElemeFE/element/issues/1309