diff --git a/src/BootstrapBlazor.Server/Components/Samples/TreeViews.razor b/src/BootstrapBlazor.Server/Components/Samples/TreeViews.razor
index a174ff0b61a..8bd7c41b9e5 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/TreeViews.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/TreeViews.razor
@@ -27,7 +27,7 @@
            Introduction="@Localizer["TreeViewNormalIntro"]"
            Name="Normal">
     <section ignore>@((MarkupString)Localizer["TreeViewNormalDescription"].Value)</section>
-    <TreeView TItem="TreeFoo" Items="@Items" OnTreeItemClick="@OnTreeItemClick" />
+    <TreeView Items="@NormalItems" OnTreeItemClick="@OnTreeItemClick" />
     <ConsoleLogger @ref="Logger1" />
 </DemoBlock>
 
@@ -45,9 +45,10 @@
         </div>
         <div class="col-12 col-lg-auto">
             <Button Text="@Localizer["TreeViewCheckboxButtonText"]" OnClick="@OnRefresh"></Button>
+            <Button Text="@Localizer["TreeViewCheckboxAddButtonText"]" OnClick="OnClickAddNode" class="ms-3"></Button>
         </div>
     </section>
-    <TreeView TItem="TreeFoo" Items="@CheckedItems" ShowCheckbox="true" OnTreeItemChecked="@OnTreeItemChecked" AutoCheckChildren="@AutoCheckChildren" AutoCheckParent="@AutoCheckParent"></TreeView>
+    <TreeView Items="@CheckedItems" ShowCheckbox="true" OnTreeItemChecked="@OnTreeItemChecked" AutoCheckChildren="@AutoCheckChildren" AutoCheckParent="@AutoCheckParent"></TreeView>
     <ConsoleLogger @ref="Logger2"></ConsoleLogger>
 </DemoBlock>
 
@@ -59,14 +60,14 @@
         <Checkbox DisplayText="@Localizer["TreeViewsDisableWholeTreeView"]" ShowAfterLabel="true" @bind-Value="@IsDisabled"></Checkbox>
         <Checkbox DisplayText="@Localizer["TreeViewsWhetherToExpandWhenDisable"]" ShowAfterLabel="true" @bind-Value="@DisableCanExpand" class="ms-3"></Checkbox>
     </div>
-    <TreeView TItem="TreeFoo" Items="@DisabledItems" ShowCheckbox="true" IsDisabled="@IsDisabled" CanExpandWhenDisabled="@DisableCanExpand"></TreeView>
+    <TreeView Items="@DisabledItems" ShowCheckbox="true" IsDisabled="@IsDisabled" CanExpandWhenDisabled="@DisableCanExpand"></TreeView>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TreeViewAccordionModelTitle"]"
            Introduction="@Localizer["TreeViewAccordionModelIntro"]"
            Name="AccordionModel">
     <section ignore>@((MarkupString)Localizer["TreeViewAccordionModelDescription"].Value)</section>
-    <TreeView TItem="TreeFoo" Items="@GetAccordionItems()" OnExpandNodeAsync="OnExpandNodeAsync" ShowCheckbox="true" IsAccordion="true"></TreeView>
+    <TreeView Items="@AccordionItems" OnExpandNodeAsync="TreeFoo.OnExpandAccordionNodeAsync" ShowCheckbox="true" IsAccordion="true"></TreeView>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TreeViewDefaultExpandTitle"]"
@@ -75,7 +76,7 @@
     <section ignore>
         @((MarkupString)Localizer["TreeViewDefaultExpandDescription"].Value)
     </section>
-    <TreeView TItem="TreeFoo" Items="@ExpandItems" ShowCheckbox="true"></TreeView>
+    <TreeView Items="@ExpandItems" ShowCheckbox="true"></TreeView>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TreeViewTreeDisplayIconTitle"]"
@@ -84,7 +85,7 @@
     <section ignore>
         @((MarkupString)Localizer["TreeViewTreeDisplayIconDescription"].Value)
     </section>
-    <TreeView TItem="TreeFoo" Items="@GetIconItems()" ShowIcon="true" ShowCheckbox="true"></TreeView>
+    <TreeView Items="@IconItems" ShowIcon="true" ShowCheckbox="true"></TreeView>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TreeViewTreeClickExpandTitle"]"
@@ -93,7 +94,7 @@
     <section ignore>
         @((MarkupString)Localizer["TreeViewTreeClickExpandDescription"].Value)
     </section>
-    <TreeView TItem="TreeFoo" Items="@GetClickExpandItems" ShowIcon="true" ShowCheckbox="true" ClickToggleNode="true"></TreeView>
+    <TreeView Items="@ClickExpandItems" ShowIcon="true" ShowCheckbox="true" ClickToggleNode="true"></TreeView>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TreeViewTreeValidationFormTitle"]"
@@ -101,7 +102,7 @@
            Name="TreeValidationForm">
     <section ignore>@((MarkupString)Localizer["TreeViewTreeValidationFormDescription"].Value)</section>
     <ValidateForm Model="@Model">
-        <TreeView TItem="TreeFoo" Items="@GetFormItems" OnTreeItemClick="@OnFormTreeItemClick" ShowCheckbox="true"></TreeView>
+        <TreeView Items="@FormItems" OnTreeItemClick="@OnFormTreeItemClick" ShowCheckbox="true"></TreeView>
     </ValidateForm>
 </DemoBlock>
 
@@ -111,44 +112,28 @@
     <section ignore>
         @((MarkupString)Localizer["TreeViewTreeLazyLoadingDescription"].Value)
     </section>
-    <TreeView TItem="TreeFoo" ClickToggleNode="true" Items="@GetLazyItems()" OnExpandNodeAsync="OnExpandNodeAsync"></TreeView>
+    <TreeView ClickToggleNode="true" Items="@LazyItems" OnExpandNodeAsync="TreeFoo.OnExpandAccordionNodeAsync"></TreeView>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TreeViewTreeCustomNodeTitle"]"
            Introduction="@Localizer["TreeViewTreeCustomNodeIntro"]"
            Name="TreeCustomNode">
-    <TreeView TItem="TreeFoo" ClickToggleNode="true" Items="GetTemplateItems()"></TreeView>
+    <TreeView ClickToggleNode="true" Items="TemplateItems"></TreeView>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TreeViewTreeNodeColorTitle"]"
            Introduction="@Localizer["TreeViewTreeNodeColorIntro"]"
            Name="TreeNodeColor">
-    <TreeView TItem="TreeFoo" ClickToggleNode="true" Items="GetColorItems()"></TreeView>
+    <TreeView ClickToggleNode="true" Items="ColorItems"></TreeView>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TreeViewCheckedItemsTitle"]"
            Introduction="@Localizer["TreeViewCheckedItemsIntro"]"
            Name="CheckedItems">
-    <TreeView TItem="TreeFoo" ShowCheckbox="true" Items="@CheckedItems2" OnTreeItemChecked="@OnTreeItemChecked2"></TreeView>
+    <TreeView ShowCheckbox="true" Items="@CheckedItems2" OnTreeItemChecked="@OnTreeItemChecked2"></TreeView>
     <ConsoleLogger @ref="Logger3"></ConsoleLogger>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["TreeViewCustomCheckedItemsTitle"]"
-           Introduction="@Localizer["TreeViewCustomCheckedItemsIntro"]"
-           Name="CustomCheckedItems">
-    <section ignore>
-        <div>@((MarkupString)Localizer["TreeViewCustomCheckedItemsTips1"].Value)</div>
-    </section>
-    <section ignore class="row form-inline">
-        <div class="col-12 col-lg-auto">
-            <Checkbox DisplayText="@Localizer["TreeViewCheckboxCheckBoxDisplayText1"]" ShowAfterLabel="true" @bind-Value="@AutoCheckChildren"></Checkbox>
-            <Checkbox DisplayText="@Localizer["TreeViewCheckboxCheckBoxDisplayText2"]" ShowAfterLabel="true" @bind-Value="@AutoCheckParent" class="ms-3"></Checkbox>
-        </div>
-    </section>
-    <TreeView TItem="TreeFoo" ShowCheckbox="true" ClickToggleNode="true" ClickToggleCheck="false" AutoCheckChildren="@AutoCheckChildren" AutoCheckParent="@AutoCheckParent"
-              Items="@GetCustomCheckedItems()" OnExpandNodeAsync="CustomCheckedNodeOnExpandNodeAsync"></TreeView>
-</DemoBlock>
-
 <DemoBlock Title="@Localizer["TreeViewSetActiveTitle"]"
            Introduction="@Localizer["TreeViewSetActiveIntro"]"
            Name="SetActive">
@@ -157,33 +142,33 @@
             <Select TValue="string" Items="SelectedItems" OnSelectedItemChanged="SelectedItemOnChanged" ShowLabel="true" DisplayText="@Localizer["TreeViewSetActiveDisplayText"]"></Select>
         </div>
     </section>
-    <TreeView @ref="SetActiveTreeView" TItem="TreeFoo" Items="@Items" OnTreeItemClick="@OnTreeItemClick"></TreeView>
+    <TreeView @ref="SetActiveTreeView" Items="@Items" OnTreeItemClick="@OnTreeItemClick"></TreeView>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TreeViewShowSkeletonTitle"]"
            Introduction="@Localizer["TreeViewShowSkeletonIntro"]"
            Name="ShowSkeleton">
     <Button Text="@Localizer["TreeViewShowSkeletonButtonText"]" IsAsync="true" Icon="fa-solid fa-font-awesome" OnClick="@OnLoadAsyncItems"></Button>
-    <TreeView TItem="TreeFoo" Items="@AsyncItems" ShowSkeleton="true" OnExpandNodeAsync="OnExpandNodeAsync" class="mt-3"></TreeView>
+    <TreeView Items="@AsyncItems" ShowSkeleton="true" OnExpandNodeAsync="OnExpandNodeAsync" class="mt-3"></TreeView>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TreeViewShowSearchTitle"]"
            Introduction="@Localizer["TreeViewShowSearchIntro"]"
            Name="ShowSearch">
-    <TreeView TItem="TreeFoo" Items="@SearchItems1" ShowSearch="true" OnSearchAsync="@OnSearchAsync"></TreeView>
+    <TreeView Items="@SearchItems1" ShowSearch="true" OnSearchAsync="@OnSearchAsync"></TreeView>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TreeViewFixedSearchTitle"]"
            Introduction="@Localizer["TreeViewFixedSearchIntro"]"
            Name="IsFixedSearch">
-    <TreeView TItem="TreeFoo" Items="@SearchItems2" ShowSearch="true" OnSearchAsync="@OnSearchAsync" IsFixedSearch="true" style="height: 180px;"></TreeView>
+    <TreeView Items="@SearchItems2" ShowSearch="true" OnSearchAsync="@OnSearchAsync" IsFixedSearch="true" style="height: 180px;"></TreeView>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TreeViewMaxSelectedCountTitle"]"
            Introduction="@Localizer["TreeViewMaxSelectedCountIntro"]"
            Name="MaxSelectedCount">
     <section ignore>@((MarkupString)Localizer["TreeViewMaxSelectedCountDesc"].Value)</section>
-    <TreeView TItem="TreeFoo" Items="@MaxItems" ShowCheckbox="true" AutoCheckChildren="true" AutoCheckParent="true"
+    <TreeView Items="@MaxItems" ShowCheckbox="true" AutoCheckChildren="true" AutoCheckParent="true"
               MaxSelectedCount="2" OnMaxSelectedCountExceed="OnMaxSelectedCountExceed"></TreeView>
 </DemoBlock>
 
@@ -191,7 +176,7 @@
            Introduction="@Localizer["TreeViewEnableKeyboardArrowUpDownIntro"]"
            Name="EnableKeyboard">
     <section ignore>@_selectedValue</section>
-    <TreeView TItem="TreeFoo" Items="@KeyboardItems" OnTreeItemClick="@OnTreeItemKeyboardClick" style="height: 160px;"
+    <TreeView Items="@KeyboardItems" OnTreeItemClick="@OnTreeItemKeyboardClick" style="height: 160px;"
               EnableKeyboard="true" ClickToggleNode="false" ClickToggleCheck="false" ShowCheckbox="true" />
 </DemoBlock>
 
@@ -202,22 +187,12 @@
         @((MarkupString)Localizer["TreeViewVirtualizeDescription"].Value)
     </section>
     <div style="height: 400px">
-        <TreeView TItem="TreeFoo" Items="@VirtualizeItems" ShowCheckbox="true" IsVirtualize="true"
+        <TreeView Items="@VirtualizeItems" ShowCheckbox="true" IsVirtualize="true"
                   AutoCheckChildren="true" AutoCheckParent="true"
                   OnExpandNodeAsync="OnExpandVirtualNodeAsync"></TreeView>
     </div>
 </DemoBlock>
 
-@* <DemoBlock Title="@Localizer["TreeViewFlatTitle"]"
-           Introduction="@Localizer["TreeViewFlatIntro"]"
-           Name="FlatItems">
-    <section ignore>
-        @((MarkupString)Localizer["TreeViewFlatItemsDescription"].Value)
-    </section>
-    <TreeView TItem="TreeFoo" Items="@FlatItems" ShowCheckbox="true"
-                AutoCheckChildren="true" AutoCheckParent="true"></TreeView>
-</DemoBlock>
- *@
 <AttributeTable Items="@GetAttributes()"></AttributeTable>
 
 <AttributeTable Items="@GetTreeItemAttributes()" Title="@Localizer["TreeViewsAttribute"]"></AttributeTable>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/TreeViews.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/TreeViews.razor.cs
index 55c11e8875d..54d7389596a 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/TreeViews.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Samples/TreeViews.razor.cs
@@ -23,8 +23,11 @@ public sealed partial class TreeViews
     private ConsoleLogger? Logger3 { get; set; }
 
     private bool DisableCanExpand { get; set; }
+
     private bool IsDisabled { get; set; }
 
+    private List<TreeViewItem<TreeFoo>> NormalItems { get; } = TreeFoo.GetTreeItems();
+
     private List<TreeViewItem<TreeFoo>> Items { get; } = TreeFoo.GetTreeItems();
 
     private bool AutoCheckChildren { get; set; }
@@ -33,15 +36,17 @@ public sealed partial class TreeViews
 
     private List<TreeViewItem<TreeFoo>> DisabledItems { get; } = GetDisabledItems();
 
+    private List<TreeViewItem<TreeFoo>>? AccordionItems { get; } = TreeFoo.GetAccordionItems();
+
     private List<TreeViewItem<TreeFoo>> ExpandItems { get; } = GetExpandItems();
 
     private List<TreeViewItem<TreeFoo>> CheckedItems { get; set; } = GetCheckedItems();
 
-    private static List<TreeViewItem<TreeFoo>> GetIconItems() => TreeFoo.GetTreeItems();
+    private static List<TreeViewItem<TreeFoo>> IconItems { get; set; } = TreeFoo.GetTreeItems();
 
-    private List<TreeViewItem<TreeFoo>> GetClickExpandItems { get; } = TreeFoo.GetTreeItems();
+    private List<TreeViewItem<TreeFoo>> ClickExpandItems { get; } = TreeFoo.GetTreeItems();
 
-    private List<TreeViewItem<TreeFoo>> GetFormItems { get; } = TreeFoo.GetTreeItems();
+    private List<TreeViewItem<TreeFoo>> FormItems { get; } = TreeFoo.GetTreeItems();
 
     private List<TreeViewItem<TreeFoo>> CheckedItems2 { get; } = TreeFoo.GetTreeItems();
 
@@ -61,7 +66,11 @@ public sealed partial class TreeViews
 
     private List<TreeViewItem<TreeFoo>> VirtualizeItems { get; } = TreeFoo.GetVirtualizeTreeItems();
 
-    private List<TreeViewItem<TreeFoo>> FlatItems { get; } = TreeFoo.GetFlatItems();
+    private List<TreeViewItem<TreeFoo>> LazyItems { get; } = TreeFoo.GetLazyItems();
+
+    private List<TreeViewItem<TreeFoo>> ColorItems { get; } = TreeFoo.GetColorItems();
+
+    private List<TreeViewItem<TreeFoo>> TemplateItems { get; } = TreeFoo.GetTemplateItems();
 
     private Foo Model => Foo.Generate(LocalizerFoo);
 
@@ -85,6 +94,11 @@ private void OnRefresh()
         CheckedItems = GetCheckedItems();
     }
 
+    private void OnClickAddNode()
+    {
+        CheckedItems.Add(new TreeViewItem<TreeFoo>(new TreeFoo() { Id = $"Id-{DateTime.Now.Ticks}" }) { Text = DateTime.Now.ToString() });
+    }
+
     private static List<TreeViewItem<TreeFoo>> GetCheckedItems()
     {
         var ret = TreeFoo.GetTreeItems();
@@ -114,35 +128,13 @@ private static List<TreeViewItem<TreeFoo>> GetDisabledItems()
         return ret;
     }
 
-    private static List<TreeViewItem<TreeFoo>> GetAccordionItems()
-    {
-        var ret = TreeFoo.GetTreeItems();
-        ret[1].Items[0].HasChildren = true;
-        return ret;
-    }
-
     private static async Task<IEnumerable<TreeViewItem<TreeFoo>>> OnExpandNodeAsync(TreeViewItem<TreeFoo> node)
     {
-        await Task.Delay(800);
+        await Task.Delay(200);
         var item = node.Value;
         return new TreeViewItem<TreeFoo>[] { new(new TreeFoo() { Id = $"{item.Id}-101", ParentId = item.Id }) { Text = "懒加载子节点1", HasChildren = true }, new(new TreeFoo() { Id = $"{item.Id}-102", ParentId = item.Id }) { Text = "懒加载子节点2" } };
     }
 
-    private static async Task<IEnumerable<TreeViewItem<TreeFoo>>> CustomCheckedNodeOnExpandNodeAsync(TreeViewItem<TreeFoo> node)
-    {
-        await Task.Delay(800);
-        var item = node.Value;
-        return TreeFoo.GetCheckedTreeItems(item.Id);
-    }
-
-    private static List<TreeViewItem<TreeFoo>> GetCustomCheckedItems()
-    {
-        var ret = TreeFoo.GetCheckedTreeItems();
-        ret[0].IsExpand = true;
-        ret[0].Items = TreeFoo.GetCheckedTreeItems();
-        return ret;
-    }
-
     private static List<TreeViewItem<TreeFoo>> GetExpandItems()
     {
         var ret = TreeFoo.GetTreeItems();
@@ -155,31 +147,6 @@ private static Task OnFormTreeItemClick(TreeViewItem<TreeFoo> item)
         return Task.CompletedTask;
     }
 
-    private static List<TreeViewItem<TreeFoo>> GetLazyItems()
-    {
-        var ret = TreeFoo.GetTreeItems();
-        ret[1].Items[0].IsExpand = true;
-        ret[2].Text = "懒加载延时";
-        ret[2].HasChildren = true;
-        return ret;
-    }
-
-    private static List<TreeViewItem<TreeFoo>> GetTemplateItems()
-    {
-        var ret = TreeFoo.GetTreeItems();
-        ret[0].Template = foo => BootstrapDynamicComponent.CreateComponent<CustomerTreeItem>(new Dictionary<string, object?>() { [nameof(CustomerTreeItem.Foo)] = foo }).Render();
-        return ret;
-    }
-
-    private static List<TreeViewItem<TreeFoo>> GetColorItems()
-    {
-        var ret = TreeFoo.GetTreeItems();
-        ret[0].CssClass = "text-primary";
-        ret[1].CssClass = "text-success";
-        ret[2].CssClass = "text-danger";
-        return ret;
-    }
-
     private Task OnTreeItemChecked2(List<TreeViewItem<TreeFoo>> items)
     {
         Logger3.Log($"当前共选中{items.Count}项");
@@ -249,38 +216,6 @@ private static async Task<IEnumerable<TreeViewItem<TreeFoo>>> OnExpandVirtualNod
         return items;
     }
 
-    private class CustomerTreeItem : ComponentBase
-    {
-        [Inject]
-        [NotNull]
-        private ToastService? ToastService { get; set; }
-
-        [Parameter]
-        [NotNull]
-        public TreeFoo? Foo { get; set; }
-
-        /// <summary>
-        /// BuildRenderTree
-        /// </summary>
-        /// <param name="builder"></param>
-        protected override void BuildRenderTree(RenderTreeBuilder builder)
-        {
-            builder.OpenElement(3, "span");
-            builder.AddAttribute(4, "class", "me-3");
-            builder.AddContent(5, Foo.Text);
-            builder.CloseElement();
-
-            builder.OpenComponent<Button>(0);
-            builder.AddAttribute(1, nameof(Button.Icon), "fa-solid fa-font-awesome");
-            builder.AddAttribute(2, nameof(Button.Text), "Click");
-            builder.AddAttribute(3, nameof(Button.OnClick), EventCallback.Factory.Create<MouseEventArgs>(this, e =>
-            {
-                ToastService.Warning("自定义 TreeViewItem", "测试 TreeViewItem 按钮点击事件");
-            }));
-            builder.CloseComponent();
-        }
-    }
-
     /// <summary>
     /// 获得属性方法
     /// </summary>
diff --git a/src/BootstrapBlazor.Server/Data/CustomTreeItem.cs b/src/BootstrapBlazor.Server/Data/CustomTreeItem.cs
new file mode 100644
index 00000000000..78b4c4501bf
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Data/CustomTreeItem.cs
@@ -0,0 +1,47 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
+
+using Microsoft.AspNetCore.Components.Rendering;
+using Microsoft.AspNetCore.Components.Web;
+
+namespace BootstrapBlazor.Server.Data;
+
+/// <summary>
+/// CustomTreeItem 组件
+/// </summary>
+class CustomTreeItem : ComponentBase
+{
+    [Inject]
+    [NotNull]
+    private ToastService? ToastService { get; set; }
+
+    /// <summary>
+    /// Foo 实例
+    /// </summary>
+    [Parameter]
+    [NotNull]
+    public TreeFoo? Foo { get; set; }
+
+    /// <summary>
+    /// BuildRenderTree
+    /// </summary>
+    /// <param name="builder"></param>
+    protected override void BuildRenderTree(RenderTreeBuilder builder)
+    {
+        builder.OpenElement(3, "span");
+        builder.AddAttribute(4, "class", "me-3");
+        builder.AddContent(5, Foo.Text);
+        builder.CloseElement();
+
+        builder.OpenComponent<Button>(0);
+        builder.AddAttribute(1, nameof(Button.Icon), "fa-solid fa-font-awesome");
+        builder.AddAttribute(2, nameof(Button.Text), "Click");
+        builder.AddAttribute(3, nameof(Button.OnClick), EventCallback.Factory.Create<MouseEventArgs>(this, e =>
+        {
+            ToastService.Warning("自定义 TreeViewItem", "测试 TreeViewItem 按钮点击事件");
+        }));
+        builder.CloseComponent();
+    }
+}
diff --git a/src/BootstrapBlazor.Server/Data/TreeFoo.cs b/src/BootstrapBlazor.Server/Data/TreeFoo.cs
index 6a08079b2cf..7903740c814 100644
--- a/src/BootstrapBlazor.Server/Data/TreeFoo.cs
+++ b/src/BootstrapBlazor.Server/Data/TreeFoo.cs
@@ -25,7 +25,7 @@ class TreeFoo
 
     public static List<TreeFoo> GetItems() =>
     [
-        new() { Text = "navigation one", Id = "1010", Icon = "fa-solid fa-font-awesome" },
+        new() { Text = "Navigation one", Id = "1010", Icon = "fa-solid fa-font-awesome" },
         new() { Text = "Navigation two", Id = "1020", Icon = "fa-solid fa-font-awesome" },
         new() { Text = "Navigation three", Id = "1030", Icon = "fa-solid fa-font-awesome" },
 
@@ -59,6 +59,63 @@ public static List<TreeViewItem<TreeFoo>> GetTreeItems()
         return CascadingTree(items);
     }
 
+    public static List<TreeViewItem<TreeFoo>> GetAccordionItems()
+    {
+        List<TreeFoo> items =
+        [
+            new() { Text = "Node-01", Id = "1010", Icon = "fa-solid fa-font-awesome" },
+            new() { Text = "Node-02", Id = "1020", Icon = "fa-solid fa-font-awesome" }
+        ];
+
+        // 算法获取属性结构数据
+        var tree = CascadingTree(items);
+        tree[0].HasChildren = true;
+        tree[1].HasChildren = true;
+
+        return tree;
+    }
+
+    public static List<TreeViewItem<TreeFoo>> GetLazyItems()
+    {
+        List<TreeFoo> items =
+        [
+            new() { Text = "LazyNode-01", Id = "1010", Icon = "fa-solid fa-font-awesome" },
+            new() { Text = "LazyNode-02", Id = "1020", Icon = "fa-solid fa-font-awesome" }
+        ];
+
+        // 算法获取属性结构数据
+        var tree = CascadingTree(items);
+        tree[0].HasChildren = true;
+        tree[1].HasChildren = true;
+        return tree;
+    }
+
+    public static List<TreeViewItem<TreeFoo>> GetTemplateItems()
+    {
+        var ret = TreeFoo.GetTreeItems();
+        ret[0].Template = foo => BootstrapDynamicComponent.CreateComponent<CustomTreeItem>(new Dictionary<string, object?>() { [nameof(CustomTreeItem.Foo)] = foo }).Render();
+        return ret;
+    }
+
+    public static async Task<IEnumerable<TreeViewItem<TreeFoo>>> OnExpandAccordionNodeAsync(TreeViewItem<TreeFoo> node)
+    {
+        await Task.Delay(200);
+        var item = node.Value;
+        return new List<TreeViewItem<TreeFoo>>
+        {
+            new(new TreeFoo() { Id = $"{item.Id}-1", ParentId = item.Id }) { Text = "懒加载子节点" }
+        };
+    }
+
+    public static List<TreeViewItem<TreeFoo>> GetColorItems()
+    {
+        var ret = TreeFoo.GetTreeItems();
+        ret[0].CssClass = "text-primary";
+        ret[1].CssClass = "text-success";
+        ret[2].CssClass = "text-danger";
+        return ret;
+    }
+
     public static List<TreeViewItem<TreeFoo>> GetVirtualizeTreeItems()
     {
         var ret = new List<TreeViewItem<TreeFoo>>();
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 4fe32bff5d5..c76390b7a03 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -652,11 +652,12 @@
     "TreeViewCheckboxTitle": "Checkbox",
     "TreeViewCheckboxIntro": "Suitable for use when you need to select a level",
     "TreeViewCheckboxTips1": "By setting the <code>OnTreeItemChecked</code> property to monitor the event when the tree control node is checked, when the check box in front of the tree control node is selected, the following log displays the data of the selected node",
-    "TreeViewCheckboxTips2": "<code>Tree</code> component data loading will keep the state of each node inside, change the node selected state and click the <b>refresh</b> button, the component node state will remain unchanged, you can pass the parameter <code>IsReset</code> Force data reset",
+    "TreeViewCheckboxTips2": "The <code>Tree</code> component will keep the status of each node when loading data. The <b>Refresh</b> button will update the data source <code>Items</code> and reinitialize the component. When you click the <code>Append Node</code> button, only the data inside the data source will be changed without reassigning values, so the status of each node will remain unchanged.",
     "TreeViewNormalRadioListDisplayText": "Whether to reset",
     "TreeViewCheckboxCheckBoxDisplayText1": "Automatically select child nodes",
     "TreeViewCheckboxCheckBoxDisplayText2": "Automatically select parent node",
-    "TreeViewCheckboxButtonText": "refresh",
+    "TreeViewCheckboxButtonText": "Refresh",
+    "TreeViewCheckboxAddButtonText": "Add",
     "TreeViewTreeDisableTitle": "Disabled state",
     "TreeViewTreeDisableIntro": "Some nodes of the Tree can be set to disabled state",
     "TreeViewTreeDisableDescription": "By setting the <code>Disabled</code> property of the data source <code>TreeViewItem</code> object, you can control whether this node can be checked or not. When set to <code>false</code>, it will not affect the node expansion. /shrink function",
@@ -684,9 +685,6 @@
     "TreeViewTreeNodeColorIntro": "Implement your own node style by setting <code>TreeViewItem</code> <code>CssClass</code>",
     "TreeViewCheckedItemsTitle": "Get all selected nodes",
     "TreeViewCheckedItemsIntro": "Get all nodes by setting the <code>OnTreeItemChecked</code> callback delegate",
-    "TreeViewCustomCheckedItemsTitle": "Customize the selected node",
-    "TreeViewCustomCheckedItemsIntro": "By setting the node <code>CheckedState</code> to check node status",
-    "TreeViewCustomCheckedItemsTips1": "Automatic/manual switchover of node selected status control by enabling/disabling <code>AutoCheckChildren</code> parameter",
     "TreeViewShowSkeletonTitle": "Loading skeleton screen",
     "TreeViewShowSkeletonIntro": "By setting <code>ShowSkeleton</code>, the component displays the skeleton screen when the data is loaded asynchronously",
     "TreeViewShowSkeletonButtonText": "Asynchronous loading",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index b8ffd5c90c4..69333406d88 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -652,11 +652,12 @@
     "TreeViewCheckboxTitle": "多选框",
     "TreeViewCheckboxIntro": "适用于需要选择层级时使用",
     "TreeViewCheckboxTips1": "通过设置 <code>OnTreeItemChecked</code> 属性监控树形控件节点被勾选时的事件，选中树形控件节点前复选框时下面日志显示选中节点的数据",
-    "TreeViewCheckboxTips2": "<code>Tree</code> 组件数据加载内部将会保持各个节点状态，改变节点选中状态点击 <b>刷新</b> 按钮，组件节点状态保持不变，可通过参数 <code>IsReset</code> 强制数据重置",
+    "TreeViewCheckboxTips2": "<code>Tree</code> 组件数据加载内部将会保持各个节点状态，<b>刷新</b> 按钮将更新数据源 <code>Items</code>，组件重新初始化，点击 <code>追加节点</code> 按钮时，仅更改数据源内部数据未重新赋值，所以各个节点状态保持不变",
     "TreeViewNormalRadioListDisplayText": "是否重置",
     "TreeViewCheckboxCheckBoxDisplayText1": "自动选中子节点",
     "TreeViewCheckboxCheckBoxDisplayText2": "自动选中父节点",
     "TreeViewCheckboxButtonText": "刷新",
+    "TreeViewCheckboxAddButtonText": "追加节点",
     "TreeViewTreeDisableTitle": "禁用状态",
     "TreeViewTreeDisableIntro": "可将 Tree 的某些节点设置为禁用状态",
     "TreeViewTreeDisableDescription": "通过设置数据源 <code>TreeViewItem</code> 对象的 <code>Disabled</code> 属性，来控制此节点是否可以进行勾选动作，设置为 <code>false</code> 时不影响节点展开/收缩功能",
@@ -684,9 +685,6 @@
     "TreeViewTreeNodeColorIntro": "通过设置 <code>TreeViewItem</code> <code>CssClass</code> 来实现自己的节点样式",
     "TreeViewCheckedItemsTitle": "获取所有选中节点",
     "TreeViewCheckedItemsIntro": "通过设置 <code>OnTreeItemChecked</code> 回调委托获取所有节点",
-    "TreeViewCustomCheckedItemsTitle": "自定义选中节点",
-    "TreeViewCustomCheckedItemsIntro": "通过设置节点 <code>CheckedState</code> 控制节点选中状态",
-    "TreeViewCustomCheckedItemsTips1": "通过开启/关闭 <code>AutoCheckChildren</code> 参数来进行节点选中状态控制自动/手动切换",
     "TreeViewShowSkeletonTitle": "加载骨架屏",
     "TreeViewShowSkeletonIntro": "通过设置 <code>ShowSkeleton</code> 使异步加载数据时组件显示骨架屏",
     "TreeViewShowSkeletonButtonText": "异步加载",
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
index 84cbc08c6cd..101478f12bd 100644
--- a/src/BootstrapBlazor/BootstrapBlazor.csproj
+++ b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.1.9-beta06</Version>
+    <Version>9.1.9-beta08</Version>
   </PropertyGroup>
 
   <ItemGroup>
diff --git a/src/BootstrapBlazor/Components/TreeView/TreeView.razor.cs b/src/BootstrapBlazor/Components/TreeView/TreeView.razor.cs
index f8c88d34480..05f1a055ede 100644
--- a/src/BootstrapBlazor/Components/TreeView/TreeView.razor.cs
+++ b/src/BootstrapBlazor/Components/TreeView/TreeView.razor.cs
@@ -354,6 +354,8 @@ protected override void OnParametersSet()
     /// <returns></returns>
     protected override async Task OnParametersSetAsync()
     {
+        _rows = null;
+
         if (Items != null)
         {
             if (Items.Count > 0)
@@ -577,7 +579,7 @@ private async Task OnClick(TreeViewItem<TItem> item)
         _activeItem = item;
         if (ClickToggleNode && CanTriggerClickNode(item))
         {
-            await OnToggleNodeAsync(item);
+            await OnToggleNodeAsync(item, false);
         }
 
         if (OnTreeItemClick != null)
@@ -672,14 +674,28 @@ public void SetActiveItem(TItem item)
     };
 
     /// <summary>
-    /// 更改节点是否展开方法
+    /// 切换节点展开收缩状态方法
     /// </summary>
     /// <param name="node"></param>
     /// <param name="shouldRender"></param>
-    private async Task OnToggleNodeAsync(TreeViewItem<TItem> node, bool shouldRender = false)
+    private async Task OnToggleNodeAsync(TreeViewItem<TItem> node, bool shouldRender)
     {
         // 手风琴效果逻辑
         node.IsExpand = !node.IsExpand;
+
+        //// 如果节点设置有子节点但是当前没有时调用 GetChildrenRowAsync 方法
+        //if (node.IsExpand && node.HasChildren && node.Items.Count == 0)
+        //{
+        //    var items = await GetChildrenRowAsync(node);
+        //    if (items != null)
+        //    {
+        //        foreach (var item in items)
+        //        {
+        //            item.Parent = node;
+        //            node.Items.Add(item);
+        //        }
+        //    }
+        //}
         if (IsAccordion && !IsVirtualize)
         {
             await TreeNodeStateCache.ToggleNodeAsync(node, GetChildrenRowAsync);
diff --git a/src/BootstrapBlazor/Components/TreeView/TreeView.razor.js b/src/BootstrapBlazor/Components/TreeView/TreeView.razor.js
index 94254bc921a..a45579c1b74 100644
--- a/src/BootstrapBlazor/Components/TreeView/TreeView.razor.js
+++ b/src/BootstrapBlazor/Components/TreeView/TreeView.razor.js
@@ -32,7 +32,7 @@ export function scroll(id, options) {
     const el = document.getElementById(id);
     const item = el.querySelector(".tree-content.active");
     if (item) {
-        item.parentElement.scrollTo(0, item.offsetTop, options || { behavior: 'smooth' });
+        item.parentElement.scrollTo({ top: item.offsetTop, left: 0, behavior: options?.behavior ?? 'smooth' });
     }
 }
 
diff --git a/test/UnitTest/Components/TreeViewTest.cs b/test/UnitTest/Components/TreeViewTest.cs
index 7bb74505230..7bfcc6a7986 100644
--- a/test/UnitTest/Components/TreeViewTest.cs
+++ b/test/UnitTest/Components/TreeViewTest.cs
@@ -133,7 +133,7 @@ public async Task Items_SetActive()
         await cut.InvokeAsync(() => cut.Instance.SetActiveItem(items[0]));
 
         var node = cut.Find(".active .tree-node-text");
-        Assert.Equal("navigation one", node.TextContent);
+        Assert.Equal("Navigation one", node.TextContent);
 
         var activeItem = items[1].Items[0].Value;
         await cut.InvokeAsync(() => cut.Instance.SetActiveItem(activeItem));
@@ -150,6 +150,23 @@ public async Task Items_SetActive()
         await cut.InvokeAsync(() => cut.Instance.SetActiveItem(activeItem));
     }
 
+    [Fact]
+    public void AppendNode_Ok()
+    {
+        var items = TreeFoo.GetAccordionItems();
+        var cut = Context.RenderComponent<TreeView<TreeFoo>>(pb =>
+        {
+            pb.Add(a => a.Items, items);
+        });
+        var contents = cut.FindAll(".tree-content");
+        Assert.Equal(2, contents.Count);
+
+        items.Add(new TreeViewItem<TreeFoo>(new TreeFoo()) { Text = "append-text" });
+        cut.SetParametersAndRender();
+        contents = cut.FindAll(".tree-content");
+        Assert.Equal(3, contents.Count);
+    }
+
     [Fact]
     public async Task OnClick_Checkbox_Ok()
     {
diff --git a/test/UnitTest/UnitTest.csproj b/test/UnitTest/UnitTest.csproj
index ee6adeaec01..89333e84506 100644
--- a/test/UnitTest/UnitTest.csproj
+++ b/test/UnitTest/UnitTest.csproj
@@ -27,6 +27,7 @@
   </ItemGroup>
 
   <ItemGroup>
+    <Compile Include="..\..\src\BootstrapBlazor.Server\Data\CustomTreeItem.cs" Link="Misc\CustomTreeItem.cs" />
     <Compile Include="..\..\src\BootstrapBlazor.Server\Data\Foo.cs" Link="Misc\Foo.cs" />
     <Compile Include="..\..\src\BootstrapBlazor.Server\Data\TreeFoo.cs" Link="Misc\TreeFoo.cs" />
     <Compile Include="..\..\src\BootstrapBlazor.Server\Extensions\IpExtensions.cs" Link="Extensions\IpExtensions.cs" />