Request to optimize the treeData update mechanism of the Tree component, add a method for updating the title, and add a method for adding and deleting nodes

[liupan1890]

• [ ] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

当前Tree组件绑定的treeData数据格式为：

//假设有10W条数据
const treeData: TreeProps['treeData'] = [
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        disabled: true,
        children: [
          { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
          { title: 'leaf', key: '0-0-0-1' },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [{ key: '0-0-1-0', title: 'sss' }],
      },
    ],
  },
];

当执行绑定时，vctree会把treeData的children层级撸平，转换为这样(仅表达逻辑，不要抠细节)：

//原始数据（10W条）
const treeData: TreeProps['treeData'] = [
    {parent:{...},    title: 'parent 1',    key: '0-0',  },
    {parent:{...},    title: 'parent 1-0',        key: '0-0-0',        disabled: true,      },
    {parent:{...},    title: 'parent 1-1',        key: '0-0-1',      },
    {parent:{...},   title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
    { parent:{...},  title: 'leaf', key: '0-0-0-1' },
    {parent:{...},   key: '0-0-1-0', title: 'sss' }
];
//当前正在显示的10几条数据
const showData:=[
    {parent:{...},    title: 'parent 1',    key: '0-0',  },
    {parent:{...},        title: 'parent 1-0',        key: '0-0-0',        disabled: true,      },
    {parent:{...},         title: 'parent 1-1',        key: '0-0-1',      },
]

当前，每一次有数据需要更新的时候

情景一：新增/删除 数据； （比如增加一个{ title: '一行新的数据', key: '0-0-new', }） 情景二：修改某一条数据的title； （比如修改{ title: 'parent 1', key: '0-0', }变成{ title: '新的名字', key: '0-0', }）

--

这时都需要执行代码 treeData = treeData.concat()触发Tree的完整刷新，才能正确显示 关键 的是，会导致vctree 重新转换一遍数据

---

修改一行数据,看看都干了啥：

1.复制一遍10W条数据(treeData.concat()) 2.vctree 遍历10W条数据，重新转换成一个新数组（创建一个10W条的新数组），并匹配每一条节点的parent节点 *3.刷新整个Tree的dom（几十条数据每条数据十几个HTMLElement [icon,line,checkbox,title...]）**

这个操作是没必要的，也是十分浪费性能的

我们预期的是，修改一行数据时 只修改这个节点的title，只刷新这个节点对应呈现的那十几个HTMLElement [icon,line,checkbox,title...] 没有复制10W(treeData.concat()) 没有转换10W(vctree) 没有整个Tree刷新

情景三：修改某一条数据的CheckBox选中状态；（比如点击一行勾选） 这个操作也会触发整个Tree刷新，但幸运的是不会导致vctree 重新转换10W的数组

--

所以希望提供一个公开的API方法,调用此方法，直接修改对应key的节点数据，并判断此节点是否在showData(虚拟树正在显示的节点列表)中，需要的话刷新一下此节点对应的dom

What does the proposed API look like?

function UpdateNode(key:string,nodeData:any){

//1.根据key，遍历vctree转换后的数组，找到指定节点
//2.使用nodeData覆盖找到的节点
//3.判断是否需要刷新dom
//4.刷新dom

}

function AddNode(parentkey:string,nodeData:any){
//增加一个子节点
}

function DeleteNode(parentkey:string,nodeData:any){
//移除一个子节点
}

[liupan1890]

对于新增节点/删除节点，可能涉及到vctree的数组转换，不太方便实现

但是对于修改一条数据TreeNode的(title,icon)，这个操作增加UpdateNode方法，是非常简单易行的！ 并不涉及tree/vctree的功能/数据格式/关联 仅仅是修改title，刷新UI

所以，迫切希望这个方法能够被采纳！大数据量时，因为修改一个名字，刷新整个TreeData，真的太浪费性能了

[tangjinzhou]

无法做到，如果你有比较好的方案，可以尝试 pr

在这个issue 里：https://github.com/vueComponent/ant-design-vue/issues/5551 已经优化了很多，个人感觉10w数据，几乎无感知卡顿了

[github-actions[bot]]

Hello @liupan1890. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch, fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @liupan1890，我们完全同意你的提议/反馈，欢迎直接在此仓库创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支，务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.