生成VNode对象

最新推荐文章于 2025-10-09 09:27:57 发布

原创最新推荐文章于 2025-10-09 09:27:57 发布 · 667 阅读

0 ·

CC 4.0 BY-SA版权

VUE 同时被 2 个专栏收录

7 篇文章

订阅专栏

vxe-table

1 篇文章

订阅专栏

本文介绍了如何将使用vxe-table时遇到的HTML数组格式转换为VNode对象，以便实现表格拖拽功能。通过实例演示了Vue中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 参数详解