Vue - render 三种写法

1、调用组件 （自定义传参） - 嵌套元素 ， 数组内 元素 生成 以 逗号 隔开 ；
render(h, params) {
    return h('el-tooltip',
      {
        props: {
          disabled: false, effect: 'light',
          content: params.row.deptName,
          placement: 'top-end',
          openDelay: 1000
        },
        class: 'table-tooltip',
        on: { click: () => { window.openDetail(params.row) } }},
      [h('span',
        {
          class: 'title',
          on: { click: () => { window.openDetail(params.row) } }},
        params.row.deptName)
      ])
  }
2、返回的是平级（同一层）元素, 用slot插槽；
  render(h, context) {
    const { icon, title } = context.props
    const vnodes = []
    if (icon) { vnodes.push(<svg-icon icon-class={icon}/>) }
    if (title) { vnodes.push(<span slot='title'>{(title)}</span>) }
    return vnodes
  }
3、创建vue组件 ，methods 添加render方法,返回 html模板 - 里面的元素可直接访问 vue组件里的事件、属性
    return (
      <el-tooltip disabled={this.disabled} class='item' effect='light' content={this.item.title} placement='left' >
        <div class={this.isActive ? 'active sidebar-item' : 'sidebar-item'} on-click={() => { this.handleClick() } } >
          <section class='sidebar-item-img'>
            <img src={this.item.meta.img} alt='' />
          </section>
          <p class='sidebar-item-name'>{ this.item.title }</p>
        </div>
      </el-tooltip>
    )