使用ant design vue
的tree
组件,实现拖动排序
要求:
- 当前节点下的子节点拖动排序
- 不允许将外部节点拖进子节点
- 不允许将内部节点拖到外面
官方文档上的例子没有做任何限制,通过代码就能看出来,使用了递归,节点之间可以随意拖动,在原来的位置删除,在目标位置添加.刚开始觉得很复杂,就在网上搜了搜,还真找到一个,但是实现得非常复杂,我感觉其实只缺少一个条件,就能实现,也没他写的这么复杂,于是自己研究了一下,发现,只需要修改例子中的几行代码就能实现
闲话少说,直接上代码
<a-tree
draggable
:tree-data="gData"
@drop="onDrop"
/>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { TreeDataItem, DropEvent } from "ant-design-vue/es/tree/Tree";
export default defineComponent({
setup() {
const gData = ref<TreeDataItem[]>([
{
title: "1",
key: "1",
children: [
{
title: "11",
key: "11",
children: [
{ title: "111", key: "111" },
{ title: "222", key: "222" },
],
},
{
title: "22",
key: "22",
children: [{ title: "333", key: "333" }],
},
],
},
{
title: "2",
key: "2",
},
]);
const onDrop = (info: DropEvent) => {
// 目标节点
const dropKey = info.node.eventKey;
// 拖动节点
const dragKey = info.dragNode.eventKey;
const dropPos = info.node.pos.split("-");
// -1 上
// 0 内
// 1 下
// 拖动的位置
const dropPosition =
info.dropPosition - Number(dropPos[dropPos.length - 1]);
const loop = (data: TreeDataItem[], key: string, callback: any) => {
data.forEach((item, index, arr) => {
if (item.key === key) {
return callback(item, index, arr);
}
if (item.children) {
return loop(item.children, key, callback);
}
});
};
const data = [...gData.value];
// 拖动节点的对象
let dragObj: TreeDataItem = {};
if (!info.dropToGap) {
return false;
} else if (
(info.node.children || []).length > 0 &&
info.node.expanded &&
dropPosition === 1
) {
return false;
} else {
let a: TreeDataItem[] = [];
let ii = 0;
loop(
data,
dragKey,
(item: TreeDataItem, index: number, arr: TreeDataItem[]) => {
a = arr;
ii = index;
dragObj = item;
}
);
// 只允许当前节点下的子节点拖动排序
if (a.some((item) => item.key === dropKey)) {
a.splice(ii, 1);
let ar: TreeDataItem[] = [];
let i = 0;
loop(
data,
dropKey,
(item: TreeDataItem, index: number, arr: TreeDataItem[]) => {
ar = arr;
i = index;
}
);
if (dropPosition === -1) {
ar.splice(i, 0, dragObj);
} else {
ar.splice(i + 1, 0, dragObj);
}
}
}
gData.value = data;
};
return {
gData,
onDrop,
};
},
});
</script>
核心其实就是这一句代码,是不是很简单
更多推荐
vue3 ant design vue tree 超简单实现拖动排序
发布评论