vue Render 函数

作者: 天驱丶 | 来源:发表于2017-08-30 00:12 被阅读823次

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

    相关文章

      网友评论

        本文标题:vue Render 函数

        本文链接:https://www.haomeiwen.com/subject/dkxzdxtx.html