Bootstrap Blazor
下载
Bootstrap Blazor

Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

Table 组件已经支持移动端适配，当屏幕小于 RenderModelResponsiveWidth 设定值时，组件渲染成卡片式方便查看数据，其默认值为 768

Table 组件有一个 RenderModel 属性，其默认值为 Auto 其他值定义如下

  • Auto: 当屏幕小于 768px 时使用 CardView 模式，否则使用 Table 模式
  • Table: 表格渲染模式，使用 table 元素进行数据渲染，适合宽屏幕下查看数据
  • CardView：卡片式渲染模式，使用 div 元素进行数据渲染，适合窄屏幕下查看数据

Table 组件有一个 UseComponentWidth 属性，其默认值为 false，表示使用 window 宽度来进行判断，当设置值为 true 时，表示使用组件自身宽度进行判断

基础表格

基础的表格展示用法。

Demo
<Table TItem="BindItem" Items="@Items.Take(3)">
    <TableColumns>
        <TableColumn @bind-Field="@context.DateTime" />
        <TableColumn @bind-Field="@context.Name" />
        <TableColumn @bind-Field="@context.Address" />
    </TableColumns>
</Table>

@code {
    private static readonly Random random = new Random();

    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    protected static List<BindItem> GenerateItems() => new List<BindItem>(Enumerable.Range(1, 80).Select(i => new BindItem()
    {
        Id = i,
        Name = $"张三 {i:d4}",
        DateTime = DateTime.Now.AddDays(i - 1),
        Address = $"上海市普陀区金沙江路 {random.Next(1000, 2000)} 弄",
        Count = random.Next(1, 100),
        Complete = random.Next(1, 100) > 50
    }));

    /// <summary>
    /// 
    /// </summary>
    protected static IEnumerable<BindItem> Items { get; } = GenerateItems();

    /// <summary>
    /// 
    /// </summary>
    public class BindItem
    {
        // 列头信息支持 ColumnName Display DisplayName 三种标签

        /// <summary>
        /// 
        /// </summary>
        [Display(Name = "主键")]
        [AutoGenerateColumn(Ignore = true)]
        public int Id { get; set; }

        /// <summary>
        /// 
        /// </summary>
        [Required(ErrorMessage = "{0}不能为空")]
        [AutoGenerateColumn(Order = 10)]
        [ColumnName(Name = "姓名", ResourceName = "Name", ResourceType = typeof(BindItem))]
        public string? Name { get; set; }

        /// <summary>
        /// 
        /// </summary>
        [AutoGenerateColumn(Order = 1, FormatString = "yyyy-MM-dd", Width = 180)]
        [ColumnName(Name = "日期", ResourceName = "DateTime", ResourceType = typeof(BindItem))]
        public DateTime? DateTime { get; set; }

        /// <summary>
        /// 
        /// </summary>
        [ColumnName(Name = "地址", ResourceName = "Address", ResourceType = typeof(BindItem))]
        [Required(ErrorMessage = "{0}不能为空")]
        [AutoGenerateColumn(Order = 20)]
        public string? Address { get; set; }

        /// <summary>
        /// 
        /// </summary>
        [ColumnName(Name = "数量", ResourceName = "Count", ResourceType = typeof(BindItem))]
        [AutoGenerateColumn(Order = 40)]
        public int Count { get; set; }

        /// <summary>
        /// 
        /// </summary>
        [ColumnName(Name = "是/否", ResourceName = "Complete", ResourceType = typeof(BindItem))]
        [AutoGenerateColumn(Order = 50)]
        public bool Complete { get; set; }

        /// <summary>
        /// 
        /// </summary>
        [Required(ErrorMessage = "请选择{0}")]
        [ColumnName(Name = "学历", ResourceName = "Education", ResourceType = typeof(BindItem))]
        [AutoGenerateColumn(Order = 60)]
        public EnumEducation? Education { get; set; }
    }

    /// <summary>
    /// 
    /// </summary>
    public enum EnumEducation
    {
        /// <summary>
        /// 
        /// </summary>
        [Description("小学")]
        Primary,

        /// <summary>
        /// 
        /// </summary>
        [Description("中学")]
        Middel
    }
}

带斑马纹表格

使用带斑马纹的表格，可以更容易区分出不同行的数据。设置 IsStriped=true 即可

Demo
<Table TItem="BindItem" Items="@Items.Take(3)" IsStriped="true">
    <TableColumns>
        <TableColumn @bind-Field="@context.DateTime" />
        <TableColumn @bind-Field="@context.Name" />
        <TableColumn @bind-Field="@context.Address" />
    </TableColumns>
</Table>

@code {
    private static readonly Random random = new Random();

    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    protected static List<BindItem> GenerateItems() => new List<BindItem>(Enumerable.Range(1, 80).Select(i => new BindItem()
    {
        Id = i,
        Name = $"张三 {i:d4}",
        DateTime = DateTime.Now.AddDays(i - 1),
        Address = $"上海市普陀区金沙江路 {random.Next(1000, 2000)} 弄",
        Count = random.Next(1, 100),
        Complete = random.Next(1, 100) > 50
    }));

    /// <summary>
    /// 
    /// </summary>
    protected static IEnumerable<BindItem> Items { get; } = GenerateItems();
}

带边框表格

通过设置 IsBordered 属性，增加表格表框效果

Demo
<Table TItem="BindItem" Items="@Items.Take(3)" IsBordered="true">
    <TableColumns>
        <TableColumn @bind-Field="@context.DateTime" />
        <TableColumn @bind-Field="@context.Name" />
        <TableColumn @bind-Field="@context.Address" />
    </TableColumns>
</Table>

@code {
    private static readonly Random random = new Random();

    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    protected static List<BindItem> GenerateItems() => new List<BindItem>(Enumerable.Range(1, 80).Select(i => new BindItem()
    {
        Id = i,
        Name = $"张三 {i:d4}",
        DateTime = DateTime.Now.AddDays(i - 1),
        Address = $"上海市普陀区金沙江路 {random.Next(1000, 2000)} 弄",
        Count = random.Next(1, 100),
        Complete = random.Next(1, 100) > 50
    }));

    /// <summary>
    /// 
    /// </summary>
    protected static IEnumerable<BindItem> Items { get; } = GenerateItems();
}

紧凑型表格

通过设置 TableSize 属性，设定表格内间隙变小适合大数据展示

Demo

TableSize 为表格大小枚举类型，默认值为 Normal，紧奏型值为 Compact

<Table TItem="BindItem" Items="@Items.Take(3)" IsBordered="true" IsStriped="true" TableSize="TableSize.Compact">
    <TableColumns>
        <TableColumn @bind-Field="@context.DateTime" Width="180" />
        <TableColumn @bind-Field="@context.Name" />
        <TableColumn @bind-Field="@context.Address" />
    </TableColumns>
</Table>

Attributes 属性

方法 Methods

TableColumn 属性
An error has occurred. This application may no longer respond until reloaded. Reload