MASA.Blazor

MASA.Blazor copied to clipboard

对于Table的Header设计简化

目前对于Table的Header我们都每次需要在code中写一个Headers进行绑定，我想是否参考Mud的设计，通过html中直接指定所有

<MDataTable Headers="_headers"
            Items="_desserts"
            ItemsPerPage="5"
            Class="elevation-1"></MDataTable>

@code {
    public class Dessert
    {
        public string Name { get; set; }

        public int Calories { get; set; }

        public double Fat { get; set; }

        public int Carbs { get; set; }

        public double Protein { get; set; }

        public int Sodium { get; set; }

        public string Calcium { get; set; }

        public string Iron { get; set; }
    }

    private List<DataTableHeader<Dessert>> _headers = new List<DataTableHeader<Dessert>>
        {
           new ()
           {
            Text= "Dessert (100g serving)",
            Align= DataTableHeaderAlign.Start,
            Sortable= false,
            Value= nameof(Dessert.Name)
          },
          new (){ Text= "Calories", Value= nameof(Dessert.Calories)},
          new (){ Text= "Fat (g)", Value= nameof(Dessert.Fat)},
          new (){ Text= "Carbs (g)", Value= nameof(Dessert.Carbs)},
          new (){ Text= "Protein (g)", Value= nameof(Dessert.Protein)},
          new (){ Text= "Iron (%)", Value= nameof(Dessert.Iron) }
        };

    private List<Dessert> _desserts = new List<Dessert>
        {
           new Dessert
           {
              Name= "Frozen Yogurt",
              Calories= 159,
              Fat= 6.0,
              Carbs= 24,
              Protein= 4.0,
              Iron= "1%",
            },
            new Dessert
            {
              Name= "Ice cream sandwich",
              Calories= 237,
              Fat= 9.0,
              Carbs= 37,
              Protein= 4.3,
              Iron= "1%",
            },
            new Dessert
            {
              Name= "Eclair",
              Calories= 262,
              Fat= 16.0,
              Carbs= 23,
              Protein= 6.0,
              Iron= "7%",
            },
            new Dessert
            {
              Name= "Cupcake",
              Calories= 305,
              Fat= 3.7,
              Carbs= 67,
              Protein= 4.3,
              Iron= "8%",
            },
            new Dessert
            {
                Name= "Gingerbread",
                Calories= 356,
                Fat= 16.0,
                Carbs= 49,
                Protein= 3.9,
                Iron= "16%"
            },
            new Dessert
            {
                Name= "Jelly bean",
                Calories= 375,
                Fat= 0.0,
                Carbs= 94,
                Protein= 0.0,
                Iron= "0%",
            },
            new Dessert
            {
                Name= "Lollipop",
                Calories= 392,
                Fat= 0.2,
                Carbs= 98,
                Protein= 0,
                Iron= "2%",
            },
            new Dessert
            {
                Name= "Honeycomb",
                Calories= 408,
                Fat= 3.2,
                Carbs= 87,
                Protein= 6.5,
                Iron= "45%",
            },
            new Dessert
            {
                Name= "Donut",
                Calories= 452,
                Fat= 25.0,
                Carbs= 51,
                Protein= 4.9,
                Iron= "22%",
            },
            new Dessert
            {
                Name= "KitKat",
                Calories= 518,
                Fat= 26.0,
                Carbs= 65,
                Protein= 7,
                Iron= "6%",
            }
        };
  }

参考mud的设计,在html标签定义

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudTable Items="@Elements.Take(4)" Hover="true" Breakpoint="Breakpoint.Sm" Loading="@_loading" LoadingProgressColor="Color.Info">
    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        <MudTh>Position</MudTh>
        <MudTh>Molar mass</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Position" HideSmall="_hidePosition">@context.Position</MudTd>
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
</MudTable>

<MudSwitch @bind-Value="_hidePosition">Hide <b>position</b> when Breakpoint=Xs</MudSwitch>
<MudSwitch @bind-Value="_loading">Show Loading</MudSwitch>
@code { 
    private bool _hidePosition;
    private bool _loading;
    private IEnumerable<Element> Elements = new List<Element>();

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    }

}