MudBlazor DataGrid设置默认列宽并实现类似Excel的文本截断与列可调整需求

嘿，我完全懂你想要的效果——就像Excel那样，列有固定的默认宽度，长文本直接截断不换行，用户还能自己拖动列边缘拉宽看完整内容对吧？之前你用CellStyle没达到预期，主要是因为MudBlazor的DataGrid默认会根据内容自动拉伸列宽，单纯设置单元格样式可能被覆盖，咱们来调整一下代码就能实现：

核心调整思路 #

• 直接指定列的默认宽度：给每个列加上Width属性，这比只在CellStyle里设置更优先，能强制固定初始宽度
• 优化文本截断样式：除了white-space: nowrap和overflow-x: hidden，加上text-overflow: ellipsis会显示省略号，更符合Excel的直观体验
• 统一表头样式：确保表头文本也不换行，和内容列保持一致的布局
• 确认列调整模式：你已经设置的ColumnResizeMode="ResizeMode.Container"是正确的，能保证调整宽度时容器适配

修改后的完整代码 #

<div style="width: 50vw;">
    <MudDataGrid T="Person" Items="@People" ColumnResizeMode="ResizeMode.Container" Style="width: 100%;">
        <Columns>
            <PropertyColumn Property="x => x.Name" Width="100px" 
                           CellStyle="white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis;"
                           HeaderStyle="white-space: nowrap;" />
            <PropertyColumn Property="x => x.State" Width="100px" 
                           CellStyle="white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis;"
                           HeaderStyle="white-space: nowrap;" />
            <PropertyColumn Property="x => x.Age" Width="100px" 
                           CellStyle="white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis;"
                           HeaderStyle="white-space: nowrap;" />
        </Columns>
    </MudDataGrid>
</div>

@code {
    private IEnumerable<Person> People = new List<Person>
    {
        new Person("Brady", 25, "Florida"),
        new Person("Tim", 32, "Minnesota"),
        new Person("Derek", 51, "Utahqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq"),
        new Person("Ben", 27, "Wisconsin"),
        new Person("Sam", 34, "Alaska")
    };

    public class Person
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public string State { get; set; }

        public Person(string name, int age, string state)
        {
            Name = name;
            Age = age;
            State = state;
        }
    }
}

效果说明 #

• 初始化后所有列都是100px宽，长文本会被截断并显示省略号
• 用户可以拖动列的边缘自由调整宽度，拉宽后就能看到完整的文本内容
• 表头和内容的文本都不会换行，完全匹配你想要的Excel式体验

备注：内容来源于stack exchange，提问作者LongNeckTimmy