Ant Design Vue Tree 树形控件实现添加子节点,在已添加的节点下再次添加时报超出调用栈大小的错
<a-tree
v-if="treeData?.length"
:show-line="true"
:tree-data="treeData"
:expanded-keys="expandedKeys"
@select="onSelect"
:auto-expand-parent="autoExpandParent"
@expand="onExpand">
<template #title="item" slot="custom">
<a-tooltip placement="right" overlayClassName="bgc_tooltip">
<template #title >
<a-menu mode="inline">
<a-menu-item key="1" @click="pushSubtree(item)">
Add Node
</a-menu-item>
<a-menu-item key="2" @click="updTree(item)">
Modify node
</a-menu-item>
<a-popconfirm
placement="right"
title="Are you sure delete this task?"
ok-text="Yes"
cancel-text="No"
@confirm="confirmtree(item)">
<a-menu-item key="2" @click="deltree(item.key)">
Delete Node
</a-menu-item>
</a-popconfirm>
</a-menu>
</template>
<template v-if="searchValues && item.title.includes(searchValues)">
<div style="color: #f50;">
<span>{{item.title}}</span>
</div>
</template>
<template v-else-if="!item.showEdit">{{item.title}}</template>
<a-input v-if="item.showEdit" type="text" ref="updDom" v-model:value="updTreedata" @blur="onchangtitle(item)"/>
</a-tooltip>
</template>
</a-tree>
const newChild = (
{
title: 'NewNode',
key: "NewNode",
children: [],
showEdit: false, //修改输入框
scopedSlots: {title: 'custom'},
}
)
// 点击添加下级节点的方法,获取当前的key(添加下级节点时,都加children,)
const pushSubtree = (obj: any) => {
console.log(obj);//获取当前的树节点
expandedKeys.value = [obj.data.key];
obj.data.children.push({...newChild})
treeData.value = [...treeData.value]
autoExpandParent.value=true
}
我试着网上的添加scopeSlot属性,但是我adv的版本是3.2.11的不能用网上的插槽命名方式,所以自己这样尝试了一下,发现没用
最近真的要被这个树形控件折磨死了,求各位指点一下迷津吧