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的不能用网上的插槽命名方式,所以自己这样尝试了一下,发现没用
最近真的要被这个树形控件折磨死了,求各位指点一下迷津吧
有几个点需要确定下才能排查到问题:
你的树相关数据怎么定义的?
相关节点操作完全是前端页面处理的吗,有调用后台接口来实时的管理树数据吗?
最好把进行操作的方法里面打一些断点,看一下treeData的变化