You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React分页表格在Chrome控制台无法显示全部行的技术咨询

React表格DOM行数与实际加载数不符的问题

我们基于React开发的应用中,表格采用分页机制,每次加载25行数据。但在Chrome控制台中检查元素并统计行数时,仅能获取20行或更少。应用界面显示已选中25条记录,控制台对应的DOM代码如下:

<tbody class="MuiTableBody-root-717 jss661" style="display: table-row-group;">
   <tr class="jss674" aria-label="trade-data-row-lineitem-004-10540141-128-highlight" style="position: absolute; transform: translateY(0px); min-width: 100%; background-color: rgb(255, 255, 255);">
   </tr>
   <tr class="jss674" aria-label="trade-data-row-lineitem-004-10540141-619-highlight" style="position: absolute; transform: translateY(35px); min-width: 100%; background-color: rgb(235, 238, 241);"></tr>
   <tr class="jss674" aria-label="trade-data-row-lineitem-004-10540141-619-highlight" style="position: absolute; transform: translateY(35px); min-width: 100%; background-color: rgb(235, 238, 241);"></tr>
   <tr class="jss674" aria-label="trade-data-row-lineitem-004-10540141-619-highlight" style="position: absolute; transform: translateY(35px); min-width: 100%; background-color: rgb(235, 238, 241);"></tr>
   <tr class="jss674" aria-label="trade-data-row-lineitem-004-10540141-619-highlight" style="position: absolute; transform: translateY(35px); min-width: 100%; background-color: rgb(235, 238, 241);"></tr>
   <tr class="jss674" aria-label="trade-data-row-lineitem-004-10540141-619-highlight" style="position: absolute; transform: translateY(35px); min-width: 100%; background-color: rgb(235, 238, 241);"></tr>
   <tr class="jss674" aria-label="trade-data-row-lineitem-004-10540141-619-highlight" style="position: absolute; transform: translateY(35px); min-width: 100%; background-color: rgb(235, 238, 241);"></tr>
   <tr class="jss674" aria-label="trade-data-row-lineitem-004-10540141-619-highlight" style="position: absolute; transform: translateY(35px); min-width: 100%; background-color: rgb(235, 238, 241);"></tr>
   <tr class="jss674" aria-label="trade-data-row-lineitem-004-10540141-619-highlight" style="position: absolute; transform: translateY(35px); min-width: 100%; background-color: rgb(235, 238, 241);"></tr>
   <tr class="jss674" aria-label="trade-data-row-lineitem-004-10540141-619-highlight" style="position: absolute; transform: translateY(35px); min-width: 100%; background-color: rgb(235, 238, 241);"></tr>
   <tr class="jss674" aria-label="trade-data-row-lineitem-004-10540141-619-highlight" style="position: absolute; transform: translateY(35px); min-width: 100%; background-color: rgb(235, 238, 241);"></tr>
   <tr class="jss674" aria-label="trade-data-row-lineitem-004-10540141-619-highlight" style="position: absolute; transform: translateY(35px); min-width: 100%; background-color: rgb(235, 238, 241);"></tr>
   <tr class="jss674" aria-label="trade-data-row-lineitem-004-10540141-619-highlight" style="position: absolute; transform: translateY(35px); min-width: 100%; background-color: rgb(235, 238, 241);"></tr>
   <tr class="jss674" aria-label="trade-data-row-lineitem-004-10540141-619-highlight" style="position: absolute; transform: translateY(35px); min-width: 100%; background-color: rgb(235, 238, 241);"></tr>
   <tr class="jss674" aria-label="trade-data-row-lineitem-004-10540141-619-highlight" style="position: absolute; transform: translateY(35px); min-width: 100%; background-color: rgb(235, 238, 241);"></tr>
   <tr class="jss674" aria-label="trade-data-row-lineitem-004-10540141-619-highlight" style="position: absolute; transform: translateY(35px); min-width: 100%; background-color: rgb(235, 238, 241);"></tr>
   <tr class="jss674" aria-label="trade-data-row-lineitem-004-10540141-619-highlight" style="position: absolute; transform: translateY(35px); min-width: 100%; background-color: rgb(235, 238, 241);"></tr>
   <tr class="jss674" aria-label="trade-data-row-lineitem-004-10540141-619-highlight" style="position: absolute; transform: translateY(35px); min-width: 100%; background-color: rgb(235, 238, 241);"></tr>
   <tr class="jss674" aria-label="trade-data-row-lineitem-004-10540141-619-highlight" style="position: absolute; transform: translateY(35px); min-width: 100%; background-color: rgb(235, 238, 241);"></tr>
   <tr class="jss674" aria-label="trade-data-row-lineitem-004-10540141-619-highlight" style="position: absolute; transform: translateY(35px); min-width: 100%; background-color: rgb(235, 238, 241);"></tr>
</tbody>

开发人员称该问题与浏览器限制有关,请问能否修改浏览器设置以显示应用中所有已加载的行?


内容的提问来源于stack exchange,提问作者VinnyTech

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.27 16:05:54