vxe-tree 树组件拖拽排序功能的使用教程
<p>vxe-tree 树组件拖拽排序功能的使用教程，通过 drag 启用行拖拽排序功能，支持同层级、跨层级、拖拽到子级非常强大的拖拽功能等</p><p>官网：https://vxeui.com<br>
github：https://github.com/x-extends/vxe-pc-ui<br>
gitee：https://gitee.com/x-extends/vxe-pc-ui</p>
<h2 id="同层级拖拽">同层级拖拽</h2>
<p>通过 drag-config.isPeerDrag 启用同层级拖拽</p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202512/3563285-20251210133911178-1541721763.png"></p>
<pre><code class="language-html"><template>
<div>
<vxe-tree v-bind="treeOptions"></vxe-tree>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const treeOptions = reactive({
transform: true,
drag: true,
dragConfig: {
isPeerDrag: true
},
data: [
{ title: '节点2', id: '2', parentId: null },
{ title: '节点3', id: '3', parentId: null },
{ title: '节点3-1', id: '31', parentId: '3' },
{ title: '节点3-2', id: '32', parentId: '3' },
{ title: '节点3-2-1', id: '321', parentId: '32' },
{ title: '节点3-2-2', id: '322', parentId: '32' },
{ title: '节点3-3', id: '33', parentId: '3' },
{ title: '节点3-3-1', id: '331', parentId: '33' },
{ title: '节点3-3-2', id: '332', parentId: '33' },
{ title: '节点3-3-3', id: '333', parentId: '33' },
{ title: '节点3-4', id: '34', parentId: '3' },
{ title: '节点4', id: '4', parentId: null },
{ title: '节点4-1', id: '41', parentId: '4' },
{ title: '节点4-1-1', id: '411', parentId: '42' },
{ title: '节点4-1-2', id: '412', parentId: '42' },
{ title: '节点4-2', id: '42', parentId: '4' },
{ title: '节点4-3', id: '43', parentId: '4' },
{ title: '节点4-3-1', id: '431', parentId: '43' },
{ title: '节点4-3-2', id: '432', parentId: '43' },
{ title: '节点5', id: '5', parentId: null }
]
})
</script>
</code></pre>
<h2 id="跨层级拖拽">跨层级拖拽</h2>
<p>通过 drag-config.isCrossDrag 启用跨层级拖拽</p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202512/3563285-20251210133920310-1453149707.gif"></p>
<pre><code class="language-html"><template>
<div>
<vxe-tree v-bind="treeOptions"></vxe-tree>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const treeOptions = reactive({
transform: true,
drag: true,
dragConfig: {
isCrossDrag: true
},
data: [
{ title: '节点2', id: '2', parentId: null },
{ title: '节点3', id: '3', parentId: null },
{ title: '节点3-1', id: '31', parentId: '3' },
{ title: '节点3-2', id: '32', parentId: '3' },
{ title: '节点3-2-1', id: '321', parentId: '32' },
{ title: '节点3-2-2', id: '322', parentId: '32' },
{ title: '节点3-3', id: '33', parentId: '3' },
{ title: '节点3-3-1', id: '331', parentId: '33' },
{ title: '节点3-3-2', id: '332', parentId: '33' },
{ title: '节点3-3-3', id: '333', parentId: '33' },
{ title: '节点3-4', id: '34', parentId: '3' },
{ title: '节点4', id: '4', parentId: null },
{ title: '节点4-1', id: '41', parentId: '4' },
{ title: '节点4-1-1', id: '411', parentId: '42' },
{ title: '节点4-1-2', id: '412', parentId: '42' },
{ title: '节点4-2', id: '42', parentId: '4' },
{ title: '节点4-3', id: '43', parentId: '4' },
{ title: '节点4-3-1', id: '431', parentId: '43' },
{ title: '节点4-3-2', id: '432', parentId: '43' },
{ title: '节点5', id: '5', parentId: null }
]
})
</script>
</code></pre>
<p>https://gitee.com/x-extends/vxe-pc-ui</p><br><br>
来源：https://www.cnblogs.com/qaz666/p/19331147
頁:
[1]