性能优化 | el-table中内嵌大量el-input控件导致渲染卡顿的问题

场景

项目中有一个应用场景，用户需要在表单中大量使用选择框以及输入框填写数据（每一行大概有三十几个输入框），当选择框与输入框达到一定数量的时候，页面会出现输入不连续、卡顿的现象，如下图：

排查

查了一下网上的解决方案，大体是因为页面渲染过多的el-input输入框给浏览器带来较大的渲染压力导致的。基于这点，对项目作出优化。

引入虚拟列表

虚拟列表，简单来说就是页面并不渲染表格中的所有数据，只渲染可视窗口部分的数据，当用户拖动滚动条滚动的时候，逐渐加载数据。这个适用于表格中需要渲染大量数据的场景，从而减轻浏览器的渲染压力。

对于elementui中使用el-table加入虚拟列表，可以参考下面这篇文章：
element全网最简单el-table实现虚拟列表

参考上面的文章，做了一个初版的效果。但由于虚拟列表只渲染部分数据的特性，所以一定会带来一个缺陷，那就是会短暂出现白屏的问题，即用户看到未渲染的区域。排查原因得知是因为el-table的占位区域append设置为定高totalHeight。

<!-- 占位 -->
<template #append>
  <div :style="{ height: `${totalHeight}px` }"></div>
</template>

...
totalHeight() {
  return this.tableData.length * this.itemHeight
}

经过思考，改成动态变化的高度，从而形成一种滚动触底更新的效果：

// 改变append的高度
updated() {
   
  if (this.$refs.multipleTable) {
   
    const bodyEl = this.$refs.multipleTable.$el.getElementsByTagName("tbody")[0]
    if (bodyEl.offsetHeight) {
   
      this.totalHeight = bodyEl.offsetHeight
    } else if (bodyEl.offsetHeight ===