MudTable 组件真的很棒,看起来非常漂亮。但我想配置列宽。有可能吗?
<MudTable Items="@my_users">
<HeaderContent>
<MudTh>Nr</MudTh>
<MudTh>Username</MudTh>
<MudTh>Email</MudTh>
<MudTh>Role</MudTh>
<MudTh>Actions</MudTh>
</HeaderContent>
<RowTemplate>
<MudTd>@context.Nr</MudTd>
<MudTd>@context.Username</MudTd>
<MudTd>@context.Email</MudTd>
<MudTd>@context.Role</MudTd>
<MudTd>
<MudButton @onclick="@(()=> OnEdit(@context))">Edit</MudButton>
</MudTd>
</RowTemplate>
<PagerContent>
<MudTablePager PageSizeOptions="new int[]{10, 25, 100}" />
</PagerContent>
</MudTable>
问题是,所有列的列空间都是相同的。我想限制第一列和最后一列的宽度。我知道,我可以使用普通的 HTML 表格,但看起来不太好。 MudTable可以进行过滤和多选。
所以我知道 HTML 可以使用 colgroup 标签,但是如何应用 MudTable 呢?我尝试在 HeaderContent 中添加 colgroup 但不起作用。感谢帮助。
有可能,colgroup 是由贡献者添加到 MudBlazor 中的,并且是记录在这里 https://mudblazor.com/components/table。您的代码将如下所示:
<MudTable Items="@my_users">
<ColGroup>
<col style="width: 60px;" />
<col />
<col />
<col />
<col style="width: 60px;"/>
</ColGroup>
<HeaderContent>
<MudTh>Nr</MudTh>
<MudTh>Username</MudTh>
<MudTh>Email</MudTh>
<MudTh>Role</MudTh>
<MudTh>Actions</MudTh>
</HeaderContent>
<RowTemplate>
<MudTd>@context.Nr</MudTd>
<MudTd>@context.Username</MudTd>
<MudTd>@context.Email</MudTd>
<MudTd>@context.Role</MudTd>
<MudTd>
<MudButton @onclick="@(()=> OnEdit(@context))">Edit</MudButton>
</MudTd>
</RowTemplate>
<PagerContent>
<MudTablePager PageSizeOptions="new int[]{10, 25, 100}" />
</PagerContent>
</MudTable>
这限制了第一列和最后一列。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)