vue Render 函数介绍
发布于 5 年前 作者 masongzhi 6704 次浏览 来自 分享

最近在用elementUI写管理后台的时候,遇到了需要在el-table表头自定义的功能,所以搜索了下vue官网,发现了createElement这个方法;之前在做react native毕设的时候,倒是用到了renderHeader的方法。

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签字符串,组件选项对象,或者一个返回值类型为String/Object的函数,必要参数
  'div',
  // {Object}
  // 一个包含模板相关属性的数据对象
  // 这样,您可以在 template 中使用这些属性.可选参数.
  {
    // (详情见下一节)
  },
  // {String | Array}
  // 子节点 (VNodes),由 `createElement()` 构建而成,
  // 或简单的使用字符串来生成“文本结点”。可选参数。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

从例子中可以看到,createElement方法是可以嵌套的

<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

回到顶部