在 HTML 中为浏览器呈现（和重新呈现）更快的是：表格或 flex-box

Question

我需要在 vue 上制作一个类似表格/表格的组件。它显示表格数据。通常它有 5-30 行和最多 30 列。但是每个单元格中的元素渲染起来非常繁重。每个都有几个事件侦听器，例如 @click 和 @hover，以及渲染更多组件的调用方法。他们也有很多动态。到目前为止它工作得很好，但是现在需要使用这个精确的组件来处理更多的行，大约 200 行。显然，最好的方法是实现分页，因为渲染了很多这些单元格会大大降低浏览器的速度。但要求明确指出，UI 不能有任何箭头在表格页面之间导航。浏览表格的唯一可接受的方法是使用滚动（或无限滚动），就像它是一页一样。所以现在我尝试在滚动时实现创建和销毁元素，当表格的某些部分（如每 30 行）出现时。

我的问题是，将什么渲染为表格组件会更快？ 我应该像这样使用表格组件吗？

  <table>
   <thead>
     <tr>
      <th v-for="date in dates">
        <span>Some dynamic components</span>
      </th>
     </tr>
   </thead>
   <tbody>
     <tr v-for="name in names">
      <th v-for="date in dates">
        <span>Some dynamic components</span>
      </th>
     </tr>
   </tbody>
  </table>

还是这个？

<div class="TableLikeComponent">
 <div class="TableHeaderLikeComp">
  <div v-for="name in names" class="RowLikeComponent">
   <span>Some dynamic components</span>
  </div>
 </div>

 <div class="TableBodyLikeComp">
  <div v-for="name in names" class="RowLikeComponent">
   <div v-for="date in dates" class="ColumnLikeComponent">
    <span>Some dynamic components</span>
   </div>
  </div>
 </div>
</div>

或者也许有更好的解决方案？ 将不胜感激任何提示。

Answer 1

尽管我之前研究过表库解决方案，但似乎它们都使用div 而不是本机表来实现性能和自定义。
从个人经验来看，原生表通常不容易使用，需要更复杂的解决方案来解决复杂问题，而 div 很容易实现。