docs(components): [tree] update select state when add or remove node (#14916)

docs(components): [tree] Update select state when add or remove node

Co-authored-by: qiang <qw13131wang@gmail.com>

docs/examples/tree/customized-node.vue

@@ -2,6 +2,7 @@
   <div class="custom-tree-container">
     <p>Using render-content</p>
     <el-tree
+      ref="treeRef1"
       style="max-width: 600px"
       :data="dataSource"
       show-checkbox
@@ -12,6 +13,7 @@
     />
     <p>Using scoped slot</p>
     <el-tree
+      ref="treeRef2"
       style="max-width: 600px"
       :data="dataSource"
       show-checkbox
@@ -45,7 +47,11 @@
 import { ref } from 'vue'
 import { ElButton } from 'element-plus'
 
-import type { RenderContentContext, RenderContentFunction } from 'element-plus'
+import type {
+  RenderContentContext,
+  RenderContentFunction,
+  TreeInstance,
+} from 'element-plus'
 
 interface Tree {
   id: number
@@ -56,22 +62,18 @@ type Node = RenderContentContext['node']
 type Data = RenderContentContext['data']
 
 let id = 1000
+const treeRef1 = ref<TreeInstance>()
+const treeRef2 = ref<TreeInstance>()
 
 const append = (data: Data) => {
   const newChild = { id: id++, label: 'testtest', children: [] }
-  if (!data.children) {
-    data.children = []
-  }
-  data.children.push(newChild)
-  dataSource.value = [...dataSource.value]
+  treeRef1.value?.append(newChild, data)
+  treeRef2.value?.append(newChild, data)
 }
 
 const remove = (node: Node, data: Data) => {
-  const parent = node.parent
-  const children: Tree[] = parent?.data.children || parent?.data
-  const index = children.findIndex((d) => d.id === data.id)
-  children.splice(index, 1)
-  dataSource.value = [...dataSource.value]
+  treeRef1.value?.remove(data)
+  treeRef2.value?.remove(data)
 }
 
 const renderContent: RenderContentFunction = (h, { node, data }) => {