继续爆肝继续干 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日

悬赏问题

  • ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线,如何释放宽带全部速度
  • ¥30 关于#r语言#的问题:如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测
  • ¥15 ETLCloud 处理json多层级问题
  • ¥15 matlab中使用gurobi时报错
  • ¥15 这个主板怎么能扩出一两个sata口
  • ¥15 不是,这到底错哪儿了😭
  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题:在模糊控制器中选出线路信息,在simulink中根据线路信息生成速度时间目标曲线(初速度为20m/s,15秒后减为0的速度时间图像)我想问线路信息是什么