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
相关产品推荐
相关产品推荐

