4

我从后端获取超过 30000 条记录到前端列表,所以使用 cdk-virtual-scroll 我可以实现这一点。我创建了带有 cdk-tag 的普通表

          <cdk-virtual-scroll-viewport [itemSize] = "20">
            <div class="result_table">
             <table class="dataframe" border="1">
            <thead>
              <tr>
                <th >
                  Name
                </th>
                <th >
                  Description
                </th>
                <th >
                  Group
                </th>
                <th >
                  Data
                </th>
              </tr>
            </thead>
                <tbody>
                  <tr *cdkVirtualFor ="let data of address_obj_data_holder | filter:searchAddr">
                    <td >
                      {{data.name}}
                    </td>
                                             
                    <td >
                      {{data.description}}
                    </td>
                    <td >
                     {{data.group}}
                    </td> 
                    <td >
                     {{data.data}}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </cdk-virtual-scroll-viewport>

如果我喜欢这样,当我向下滚动时,表格标题也会滚动,如果我喜欢,

          <cdk-virtual-scroll-viewport [itemSize] = "20">
            <div class="result_table">
             <table class="dataframe" border="1">
            <thead>
              <tr>
                <th style="width: 20% !important;">
                  Name
                </th>
                <th style="width: 40% !important;">
                  Description
                </th>
                <th style="width: 20% !important;">
                  Group
                </th>
                <th style="width: 20% !important;">
                  Data
                </th>
              </tr>
            </thead>
                <tbody>
                  <tr *cdkVirtualFor ="let data of address_obj_data_holder | filter:searchAddr">
                    <td style="width: 20% !important;">
                      {{data.name}}
                    </td>
                                             
                    <td style="width: 40% !important;">
                      {{data.description}}
                    </td>
                    <td style="width: 20% !important;">
                    {{data.group}}
                    </td> 
                    <td style="width: 20% !important;">
                      {{data.data}}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </cdk-virtual-scroll-viewport>

header 和 tbody 的宽度略有不同,两者的宽度不同,因为我们仅在下面的 body 中滚动。有人可以帮我解决这个对齐问题吗?

在此处输入图像描述

4

1 回答 1

0

如果你想让表格的标题变得粘稠并且你正在使用 cdk-virtual-scroll-viewport,那么试试这个:

table { overflow: auto; }
thead { position: sticky; top: 0; }
于 2021-10-06T05:18:52.030 回答