doc(Table): update sample code (#2415)

* doc: 更新文档

* refactor: 更改参数名称

* doc: 更新示例

* doc: 更新资源文件

* doc: 更新示例

* refactor: 更新 loader 查找逻辑

* refactor: 更新代码逻辑

* chore: bump version 8.0.3-beta3

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Table/TablesColumnResizing.razor

@@ -44,9 +44,10 @@
 <DemoBlock Title="@Localizer["AllowResizingTitle"]"
            Introduction="@Localizer["AllowResizingIntro"]"
            Name="AllowResizing">
-    <p class="mb-3">@((MarkupString)Localizer["AllowResizingDesc"].Value)</p>
+    <section ignore class="mb-3">@((MarkupString)Localizer["AllowResizingDesc"].Value)</section>
     <Table TItem="Foo"
-           IsPagination="true" PageItemsSource="@PageItemsSource" AllowResizing="true"
+           IsPagination="true" PageItemsSource="@PageItemsSource"
+           AllowResizing="true" ClientTableName="table-test"
            IsStriped="true" IsBordered="true" RenderMode="TableRenderMode.Table"
            ShowToolbar="false" IsMultipleSelect="true"
            OnQueryAsync="@OnQueryAsync">

src/BootstrapBlazor.Server/Locales/zh.json

@@ -4822,7 +4822,7 @@
     "WidthP3": "通过设置按钮 <code>IsShow</code> 参数来控制是否显示按钮",
     "AllowResizingTitle": "允许列调整",
     "AllowResizingIntro": "通过指定 <code>AllowResizing</code> 设置表格列允许调整宽度",
-    "AllowResizingDesc": "<b>注意：</b> <code>Table</code> 父容器有有效宽度值时 <code>Table</code> 才会出现滚动条",
+    "AllowResizingDesc": "<b>注意：</b> <code>Table</code> 父容器有有效宽度值时 <code>Table</code> 才会出现滚动条，可通过设置 <code>ClientTableName</code> 参数开启本地化存储列宽功能，即通过拖拽后列宽下次打开时会保持",
     "WidthButtonText1": "明细",
     "WidthButtonText2": "编辑",
     "WidthButtonText3": "权限",

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.0.3-beta02</Version>
+    <Version>8.0.3-beta03</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

src/BootstrapBlazor/Components/Table/Table.razor.cs

@@ -579,7 +579,7 @@ public void ExpandDetailRow(TItem item)
     /// 获得/设置 表格名称 默认 null 用于列宽持久化功能
     /// </summary>
     [Parameter]
-    public string? TableName { get; set; }
+    public string? ClientTableName { get; set; }
 
     [CascadingParameter]
     [NotNull]
@@ -836,14 +836,14 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         ? $"width: {_localStorageTableWidth.Value}px;"
         : null;
 
-    private string? GetTableName(bool hasHeader) => hasHeader ? TableName : null;
+    private string? GetTableName(bool hasHeader) => hasHeader ? ClientTableName : null;
 
     private async Task<IEnumerable<ColumnWidth>> ReloadColumnWidth()
     {
         IEnumerable<ColumnWidth>? ret = null;
-        if (!string.IsNullOrEmpty(TableName) && AllowResizing)
+        if (!string.IsNullOrEmpty(ClientTableName) && AllowResizing)
         {
-            var jsonData = await InvokeAsync<string>("reloadColumnWidth", Id, TableName);
+            var jsonData = await InvokeAsync<string>("reloadColumnWidth", Id, ClientTableName);
             if (!string.IsNullOrEmpty(jsonData))
             {
                 try

src/BootstrapBlazor/Components/Table/Table.razor.js

@@ -579,10 +579,11 @@ export function sort(id) {
 export function load(id, method) {
     const table = Data.get(id)
 
-    const loader = table.el.querySelector('.table-loader')
+    const loader = [...table.el.children].find(el => el.classList.contains('table-loader'));
     if (method === 'show') {
         loader.classList.add('show')
-    } else {
+    }
+    else {
         loader.classList.remove('show')
     }
 }