生成VNode对象

需求：使用vxe-table替换antd表格，实现表格拖拽功能。

问题：文档上一个函数返回了一个数组，里面是HTML代码。第一次遇见这种格式。就这样吧能运行就好。然后写完DEMO在向项目中移植的时候发现报错。

tableColumn: [
  {
     width: 60,
     slots: {
       default: () => {
         return [
           <span class="drag-btn">
              <i class="vxe-icon--menu"></i>
           </span>
         ]
     },
     header: () => {
       return [
         <vxe-tooltip content="按住后可以上下拖动排序！">
            <i class="vxe-icon--question"></i>
         </vxe-tooltip>
       ]
     }
  }
]

解决方案：查看文档需要返回一个String或者VNode[]

 

slots: {
   default: () => {
     let vm = new Vue();
     let h = vm.$createElement;
     let spanObj = h('span', {
       attrs: {
         class: 'drag-btn'
       }
     }, ['', h('i', {
        attrs: {
           class: 'vxe-icon--menu'
        }
     }, '')])
    }
}

参考文章：资料1、Vue中VNode对象创建方法

                  资料2、Vue里createElement 参数详解