MudBlazor中FixedHeader开启后固定左列表头被覆盖的解决方法

问题描述 #

使用MudTable展示员工列表，已实现左侧第一列固定功能，添加FixedHeader="true"属性后，拖动水平滚动条向右时，其余列的表头会覆盖固定的左列表头。

原代码 #

<style>
    .sticky-left {
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: white; 
    }
</style>

<MudTable Items="@GetEmployees()" Breakpoint="Breakpoint.None" Striped="true" Bordered="true" Height="400px" FixedHeader="true">
    <HeaderContent>
        <MudTh Class="sticky-left">First Name</MudTh>
        <MudTh>Last Name</MudTh>
        <MudTh>Value</MudTh>
        <MudTh>Value</MudTh>
        <MudTh>Value</MudTh>
        <MudTh>Value</MudTh>
        <MudTh>Value</MudTh>
        <MudTh>Value</MudTh>
        <MudTh>Value</MudTh>
        <MudTh>Value</MudTh>

    </HeaderContent>
    <RowTemplate>
        <MudTd Class="sticky-left" DataLabel="FirstName">@context.FirstName</MudTd>
        <MudTd DataLabel="LastName">@context.LastName</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
    </RowTemplate>
</MudTable>

@code {
    private Employee employee = new Employee();
    private List<Employee> employees = new List<Employee>();

    private List<Employee> GetEmployees()
    {
        employees = employee.GetAll();
        return employees;
    }
}

public class Employee
{
    public int ID { get; set; } = 0;
    public string FirstName { get; set; } = "";
    public string LastName { get; set; } = "";
    public string Value { get; set; } = "10000";

    public List<Employee> GetAll()
    {
        List<Employee> list = new List<Employee>();
        Employee obj;

        for (int i = 1; i <= 50; i++)
        {
            obj = new Employee
            {
                ID = i,
                FirstName = "First name " + i,
                LastName = "Last name " + i
            };
            list.Add(obj);
        }

        return list;
    }
}

解决方案 #

核心是提高固定表头的层级（z-index）：当FixedHeader="true"开启时，MudTable会给表头容器设置默认z-index（通常为3），原代码中固定列的z-index:1低于该值，导致被其他表头覆盖。只需给固定表头设置更高的z-index即可。

修改后的代码 #

<style>
    .sticky-left {
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: white; 
    }
    /* 单独给固定表头提高层级，确保高于其他表头 */
    .sticky-header {
        z-index: 5;
    }
</style>

<MudTable Items="@GetEmployees()" Breakpoint="Breakpoint.None" Striped="true" Bordered="true" Height="400px" FixedHeader="true">
    <HeaderContent>
        <!-- 给固定表头添加额外的类来提高z-index -->
        <MudTh Class="sticky-left sticky-header">First Name</MudTh>
        <MudTh>Last Name</MudTh>
        <MudTh>Value</MudTh>
        <MudTh>Value</MudTh>
        <MudTh>Value</MudTh>
        <MudTh>Value</MudTh>
        <MudTh>Value</MudTh>
        <MudTh>Value</MudTh>
        <MudTh>Value</MudTh>
        <MudTh>Value</MudTh>

    </HeaderContent>
    <RowTemplate>
        <MudTd Class="sticky-left" DataLabel="FirstName">@context.FirstName</MudTd>
        <MudTd DataLabel="LastName">@context.LastName</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
    </RowTemplate>
</MudTable>

@code {
    private Employee employee = new Employee();
    private List<Employee> employees = new List<Employee>();

    private List<Employee> GetEmployees()
    {
        employees = employee.GetAll();
        return employees;
    }
}

public class Employee
{
    public int ID { get; set; } = 0;
    public string FirstName { get; set; } = "";
    public string LastName { get; set; } = "";
    public string Value { get; set; } = "10000";

    public List<Employee> GetAll()
    {
        List<Employee> list = new List<Employee>();
        Employee obj;

        for (int i = 1; i <= 50; i++)
        {
            obj = new Employee
            {
                ID = i,
                FirstName = "First name " + i,
                LastName = "Last name " + i
            };
            list.Add(obj);
        }

        return list;
    }
}

说明 #

• 新增.sticky-header类，设置z-index:5，确保数值高于MudTable固定表头容器的默认z-index；
• 仅给表头的<MudTh>添加该类，表格行的固定列保持原有z-index即可；
• 保持background-color:white确保固定表头不透明，避免显示下方内容。

内容的提问来源于stack exchange，提问作者ndn