本文主要包含a-tree的操作,添加、修改、删除和拖拽。
<a-tree
showLine
showIcon
:multiple="multiple"
:draggable="draggable"
:default-expanded-keys="expandedKeys"
:expandedKeys="expandedKeys"
:selectedKeys="selectedKeys"
:treeData="treeData"
v-if="!spinning"
@drop="onDrag"
@expand="onExpand"
@select="onSelect"
>
<template v-if="nodeBtns" slot="custom" slot-scope="item">
<a-button size="small" icon="plus" @click="toAdd(item)" />
<a-button size="small" icon="edit" @click="toEdit(item)" />
<a-button size="small" icon="delete" @click="toDelete(item)" />
</template>
</a-tree>
数据:
const treeData = [
{
title: "1",
key: "0-0",
scopedSlots: { icon: "rootAdd" },
children: [
{
title: "1.1",
key: "0-1",
id:"0-1",
parentId:"",
sort:0,
scopedSlots: { icon: "custom" },
children: [
{ title: "1.1.1", key: "0-1-1", id: "0-1-1", parentId:"0-1",sort:0, scopedSlots: { icon: "childEdit" } },
{ title: "1.1.2", key: "0-1-2", id: "0-1-2", parentId:"0-1",sort:1, scopedSlots: { icon: "childEdit" } },
{ title: "1.1.3", key: "0-1-3", id: "0-1-3", parentId:"0-1",sort:2, scopedSlots: { icon: "childEdit" } },
],
},
],
},
];
增改的操作操作:
treeAction (node, id, fn) { // fn对应tree节点的操作
node.some((item,index) => {
if (item.key === id) {
fn(node, item, index)
return true;
}
if (item.children && item.children.length) {
this.treeAction(item.children, id, fn);
}
});
},
1.增加(在接口执行成功后执行,不用刷新整个tree):
let that = this
that.treeAction(that.treeData, that.item.parentId, (node, item, index) => {
item.children = item.children || [];
that.item.key=data
that.item.scopedSlots = { icon: "custom" }
item.children.push(that.item)
});
2. 修改(在接口执行成功后执行,不用刷新整个tree):
this.treeAction(this.treeData, this.item.key, (node, item, index) => {
item.title = that.item.title;
});
3. 删除(在接口执行成功后执行,不用刷新整个tree):
that.treeAction(that.treeData, item.key, (node, item, index) => {
node.splice(index, 1);
});