继续爆肝继续干 2022-09-28 00:46 采纳率: 33.3%
浏览 47
已结题

Ant Design Vue Tree 树形控件实现添加子节点

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的不能用网上的插槽命名方式,所以自己这样尝试了一下,发现没用
最近真的要被这个树形控件折磨死了,求各位指点一下迷津吧

  • 写回答

2条回答 默认 最新

  • 飞鱼爱吃米 2022-09-28 09:52
    关注

    有几个点需要确定下才能排查到问题:
    你的树相关数据怎么定义的?
    相关节点操作完全是前端页面处理的吗,有调用后台接口来实时的管理树数据吗?
    最好把进行操作的方法里面打一些断点,看一下treeData的变化

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 10月6日
  • 已采纳回答 9月28日
  • 创建了问题 9月28日

悬赏问题

  • ¥20 机器学习能否像多层线性模型一样处理嵌套数据
  • ¥20 西门子S7-Graph,S7-300,梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改,求解答!!
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗?在Android studio上该如何部署?
  • ¥20 docker里部署springboot项目,访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效