vue 表格组件 vxe-table 树表格懒加载支持拖拽排序的详细用法

仰望.2026-10-27 21:13

树表格的懒加载与拖拽排序单独使用时都比较直观，但组合在一起时有几个关键点：懒加载的行默认必须先展开过才允许拖拽到其子节点；若要拖拽到尚未加载的节点，需要额外开启自动加载或自动展开配置。本文说明如何配置、两种方案的差异，以及数据获取方式。

vxe-table 树表格懒加载如何开启拖拽排序？

在 rowConfig 中设置 drag: true 开启行拖拽，在 rowDragConfig 中按需开启 isCrossDrag、isToChildDrag 等能力，并在树节点列上设置 dragSort: true。

  • 生效前提：
    • rowConfig.drag 必须为 true，否则 rowDragConfig 不生效。
    • 拖拽排序的列需配置 dragSort: true，通常与 treeNode: true 在同一列上。
    • treeConfig.transform: true 时，数据以平铺形式提供，由组件转换为树形结构。
  • 预期结果：
    • 行可上下拖拽调整顺序；开启 isCrossDrag 后支持跨层级拖拽；开启 isToChildDrag 后可将行拖入另一行作为子节点。

懒加载行能否直接拖拽到子节点？

默认不能。支持启用自动展开,懒加载的行必须先展开过一次，子节点已加载后，才允许将其他行拖拽到其子节点位置。

  • 原因：
    • 拖拽到子节点需要目标行的子级数据已存在于内存中，组件才能计算插入位置并渲染。未展开的行子级尚未加载，组件无法确定拖拽落点。
  • 解决方案：
    • 通过以下两个配置之一，允许拖拽到尚未加载的节点：
配置项 行为
rowDragConfig.isAutoLazyLoadToChild 允许拖拽到未被懒加载的节点，若为懒加载行，拖拽时触发加载，但是不展开
rowDragConfig.isAutoExpandToChild 拖拽到子级时自动展开父级；若为懒加载行，自动触发子节点加载并自动展开

两者都能解决"拖拽到未加载节点"的问题，区别在于是否伴随视觉上的展开动作：isAutoExpandToChild 会展开父级，用户能看到子节点出现；isAutoLazyLoadToChild 更偏向静默加载。实际项目中建议优先使用 isAutoExpandToChild，交互反馈更清晰。

懒加载与拖拽排序

当启用 row-drag-config.isToChildDrag 允许拖拽到子节点时，懒加载的行默认需要先展开过后才允许拖拽

如果需要启用允许拖拽到未被懒加载的的节点，可以通过来 row-drag-config.isAutoLazyLoadToChild 或 row-drag-config.isAutoExpandToChild 启用

代码

默认场景，拖拽到子节点（需先展开后才能拖拽为子节点）

html 复制代码 
<template>
  <div>
    <vxe-button status="success" @click="resultEvent">获取数据</vxe-button>
    <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const gridRef = ref()

// 模拟后台
const fetchChildListApi = (parentRow) => {
  return new Promise(resolve => {
    setTimeout(() => {
      const childs = [
        { id: parentRow.id + 1000000, parentId: parentRow.id, name: parentRow.name + Date.now(), type: 'mp4', size: 0, date: '2021-10-03', hasChild: true },
        { id: parentRow.id + 1500000, parentId: parentRow.id, name: parentRow.name + Date.now() + 1, type: 'mp3', size: 0, date: '2021-07-09', hasChild: false }
      ]
      resolve(childs)
    }, 500)
  })
}

const gridOptions = reactive({
  border: true,
  rowConfig: {
    drag: true
  },
  rowDragConfig: {
    isCrossDrag: true,
    isSelfToChildDrag: true,
    isToChildDrag: true,
    showGuidesStatus: false
  },
  columnConfig: {},
  treeConfig: {
    transform: true,
    rowField: 'id',
    parentField: 'parentId',
    lazy: true,
    hasChild: 'hasChild',
    loadMethod ({ row }) {
      // 异步加载子节点
      return fetchChildListApi(row)
    }
  },
  columns: [
    { type: 'seq', width: 70 },
    { field: 'name', title: 'Name', minWidth: 300, treeNode: true, dragSort: true },
    { field: 'size', title: 'Size' },
    { field: 'type', title: 'Type' },
    { field: 'date', title: 'Date' }
  ],
  data: [
    { id: 10000, parentId: null, name: 'Test1', type: 'mp3', size: 1024, date: '2020-08-01', hasChild: true },
    { id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: 0, date: '2021-04-01', hasChild: false },
    { id: 23666, parentId: null, name: 'Test9', type: 'xlsx', size: 2048, date: '2020-11-01', hasChild: true },
    { id: 24555, parentId: null, name: 'Test16', type: 'avi', size: 224, date: '2020-10-01', hasChild: true }
  ]
})

const resultEvent = () => {
  const $grid = gridRef.value
  if ($grid) {
    const tableData = $grid.getFullData()
    console.log(tableData)
  }
}
</script>

预期结果：行可拖拽调整顺序、跨层级、拖入已展开的节点作为子项。若目标行从未展开，拖入子节点的操作不会触发加载

拖拽并自动展开

通过 row-drag-config.isAutoExpandToChild 设置在拖拽到子级时自动展开父级,如果是懒加载行则自动触发加载

代码

拖拽并自动展开------支持拖拽到未加载节点，与第一个示例的唯一区别是在 rowDragConfig 中增加 isAutoExpandToChild: true：

html 复制代码 
<template>
  <div>
    <vxe-button status="success" @click="resultEvent">获取数据</vxe-button>
    <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const gridRef = ref()

// 模拟后台
const fetchChildListApi = (parentRow) => {
  return new Promise(resolve => {
    setTimeout(() => {
      const childs = [
        { id: parentRow.id + 1000000, parentId: parentRow.id, name: parentRow.name + Date.now(), type: 'mp4', size: 0, date: '2021-10-03', hasChild: true },
        { id: parentRow.id + 1500000, parentId: parentRow.id, name: parentRow.name + Date.now() + 1, type: 'mp3', size: 0, date: '2021-07-09', hasChild: false }
      ]
      resolve(childs)
    }, 500)
  })
}

const gridOptions = reactive({
  border: true,
  rowConfig: {
    drag: true
  },
  rowDragConfig: {
    isCrossDrag: true,
    isSelfToChildDrag: true,
    isToChildDrag: true,
    isAutoExpandToChild: true,
    showGuidesStatus: false
  },
  columnConfig: {},
  treeConfig: {
    transform: true,
    rowField: 'id',
    parentField: 'parentId',
    lazy: true,
    hasChild: 'hasChild',
    loadMethod ({ row }) {
      // 异步加载子节点
      return fetchChildListApi(row)
    }
  },
  columns: [
    { type: 'seq', width: 70 },
    { field: 'name', title: 'Name', minWidth: 300, treeNode: true, dragSort: true },
    { field: 'size', title: 'Size' },
    { field: 'type', title: 'Type' },
    { field: 'date', title: 'Date' }
  ],
  data: [
    { id: 10000, parentId: null, name: 'Test1', type: 'mp3', size: 1024, date: '2020-08-01', hasChild: true },
    { id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: 0, date: '2021-04-01', hasChild: false },
    { id: 23666, parentId: null, name: 'Test9', type: 'xlsx', size: 2048, date: '2020-11-01', hasChild: true },
    { id: 24555, parentId: null, name: 'Test16', type: 'avi', size: 224, date: '2020-10-01', hasChild: true }
  ]
})

const resultEvent = () => {
  const $grid = gridRef.value
  if ($grid) {
    const tableData = $grid.getFullData()
    console.log(tableData)
  }
}
</script>

预期结果：将行拖到未展开的父节点上时，父节点自动展开并触发 loadMethod 加载子节点，拖拽落点生效。这是"任意层级拖拽排序"的关键配置。

关键代码解析

1. 开启行拖拽

javascript 复制代码 
rowConfig: {
  drag: true
}

这是拖拽的总开关。未开启时，rowDragConfig 中的任何配置都不会生效。

2. 拖拽能力配置

javascript 复制代码 
rowDragConfig: {
  isCrossDrag: true,        // 允许跨层级拖拽（不同父节点之间）
  isSelfToChildDrag: true,  // 允许拖拽自身到自己的子节点
  isToChildDrag: true,      // 允许拖拽到子节点
  isAutoExpandToChild: true, // 拖拽到子级时自动展开
  showGuidesStatus: false   // 是否显示拖拽引导线
}
配置项 类型 默认值 说明
isCrossDrag Boolean false 是否允许跨层级拖拽
isSelfToChildDrag Boolean false 是否允许拖拽自身到自己的子节点
isToChildDrag Boolean false 是否允许拖拽到子节点
isAutoExpandToChild Boolean false 拖拽到子级时自动展开父级；懒加载行自动触发加载
isAutoLazyLoadToChild Boolean false 允许拖拽到未被懒加载的节点
showGuidesStatus Boolean true 是否显示拖拽引导线

3. 树配置与懒加载

javascript 复制代码 
treeConfig: {
  transform: true,      // 平铺数据转树形
  rowField: 'id',       // 行主键
  parentField: 'parentId', // 父级字段
  lazy: true,           // 启用懒加载
  hasChild: 'hasChild', // 标记是否有子节点
  loadMethod ({ row }) {
    return fetchChildListApi(row)
  }
}
  • transform: true：数据以平铺数组提供，由组件根据 rowField 与 parentField 构建树形结构。
  • lazy: true：子节点按需加载，初始只加载根节点。
  • hasChild：数据中标记该行是否还有子节点；为 true 时行前显示展开图标。
  • loadMethod：展开时调用，需返回 Promise，解析结果为子节点数组。

4. 拖拽排序列

javascript 复制代码 
{ field: 'name', title: 'Name', minWidth: 300, treeNode: true, dragSort: true }
  • treeNode: true：指定该列为树节点列，展开图标与缩进在此列显示。
  • dragSort: true：该列参与拖拽排序。通常只在一列上配置，避免多列拖拽行为冲突。

5. 获取拖拽后的数据

javascript 复制代码 
const tableData = $grid.getFullData()
  • 返回当前表格的完整树形数据，包含已加载的子节点。
  • 拖拽排序后，数据的 parentId 与顺序会被更新，可通过此方法获取最新结构提交后端。
  • 注意：未被懒加载展开的节点不在返回结果中，因为其数据尚未加载。

https://vxetable.cn

相关推荐
前端 贾公子42 分钟前
vite-plugin-uni-manifest 升级指南
前端
小码哥_常1 小时前
iPhone 用户传了张 HEIC，我的前端崩了
前端
小码哥_常1 小时前
你发的原图可能暴露你家地址——聊聊图片 EXIF 隐私
前端
java1234_小锋1 小时前
【技术专题】CSS3 网页技术 - CSS3 优先级
前端·css·css3
鸿蒙开发2 小时前
共享 Schema 与 SchemaFactory
前端·后端·harmonyos
屏什么录2 小时前
录屏超过两小时就卡顿崩盘？从参数调优到代码实现，一文彻底搞定长时间录屏
前端·音视频开发
计算机魔术师2 小时前
950亿怎么拆：Meta给AI基建配的三档弹药
前端
碳基生物猛吃膳食纤维3 小时前
结合DEEPSEEK和CHATGPT弄了个小脚本，批量检查商品主图
前端
绝世唐门三哥3 小时前
CSS 换行三剑客：overflow-wrap、word-break 与 white-space 完全指南
前端·css
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）03历年考研数学一、数学二、数学三真题试卷及答案PDF04GitHub 镜像站点05几个好用的ip纯净度检测网站06昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战07苹果iPA游戏软件资源下载网站08CVE-2026-91403 高危漏洞预警：Java JSSE 信任链被攻破 全场景修复方案与Linux系统级彻底清理实操09蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接10Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）