Ant Design Blazor表格高度自适应

Ant Design Blazor表格高度自适应

一、先导入js

在_Host.cshtml导入js

 
    <component type="typeof(App)" render-mode="ServerPrerendered" />
    <script src="_framework/blazor.server.js"></script>
    <script>
        window.Web =
        {
        //获取浏览器高度的方法
            GetBodyHeightByClassName: function(){
                try {
                    var w = document.body.offsetHeight-400;
                    if (w != 0) {
                        return w;
                    }
                    return 0;
                }
                catch (e) {
                    console.log(e);
                }
            },
        };
        window.onload = function ()
        {
            //: 判断网页是否加载完成   
            if (document.readyState == "complete")
            {
                //setTimeout("returnArrayAsync()", "2000");
            }
        }
    </script>

二、使用

1.在组件里面引入js

@inject IJSRuntime JsRuntime

2.定义一个属性

public int BodyHeight { get; set; }

在表格上的ScrollY上绑定BodyHeight

  <Table DataSource="data" PageSize="10" ScrollY="@BodyHeight.ToString()">
            <Column @bind-Field="@context.StaffName" />
            <Column @bind-Field="@context.DepartmentName" />
            <Column @bind-Field="@context.Mobile" />
            <Column @bind-Field="@context.Address" />
            <Column @bind-Field="@context.Mobile" />
            <Column @bind-Field="@context.IDCard" />
            <ActionColumn Title="操作">
                <Button @onclick="ToggleShow" Type="primary">修改</Button> <Button Type="primary" Danger>删除</Button>
            </ActionColumn>
        </Table>

3.调用js方法

这里可以写方法，也可以不写，写一下比较好~

protected async void UpdataHeight()
    {
        BodyHeight = await JsRuntime.InvokeAsync<int>("Web.GetBodyHeightByClassName");
        StateHasChanged();
    }

	//这里要注入一下，这个是每次改变浏览器的大小用到的
	[Inject]
    private AntDesign.JsInterop.DomEventService DomEventService { get; set; }
    //在组件呈现之后调用UpdataHeight
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender == true)
        {
        	//页面开始调用一次
            UpdataHeight();
            DomEventService.AddEventListener("window", "resize", _ =>
            {
                UpdataHeight();
            });
        }
    }

效果：