突破桎梏，优化Element UI表格性能：一招解决固定列拖累问题

前端

2023-10-16 14:01:57

Element UI固定列的性能瓶颈

在Element UI中，固定列是通过多渲染一个表格来实现的，然后设置该表格宽度为所有固定列的宽度和，然后其他的列都visibility:hidden。这种实现方式虽然能够实现固定列的效果，但是也会带来一些性能问题。

首先，多渲染一个表格会增加页面的DOM元素数量，从而增加浏览器的渲染压力。其次，隐藏其他列虽然可以减少需要渲染的元素数量，但是仍然会增加浏览器的计算量。

优化方案：使用sticky定位

为了解决上述性能问题，我们可以使用sticky定位来实现固定列。sticky定位可以将元素固定在浏览器视口内，即使滚动页面，元素也不会移动。

使用sticky定位实现固定列的步骤如下：

为表格设置position: relative;
为固定列设置position: sticky; top: 0; left: 0;
为其他列设置position: absolute; left: 0;

这样，固定列就会被固定在浏览器视口内，其他列则会跟随页面滚动。

实战案例

以下是一个使用sticky定位实现固定列的示例：

<div class="table-container">
  <table class="table">
    <thead>
      <tr>
        <th v-for="column in fixedColumns" :style="{ width: column.width + 'px' }">{{ column.label }}</th>
        <th v-for="column in scrollableColumns" :style="{ left: column.offset + 'px' }">{{ column.label }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in data">
        <td v-for="column in fixedColumns" :style="{ width: column.width + 'px' }">{{ row[column.prop] }}</td>
        <td v-for="column in scrollableColumns" :style="{ left: column.offset + 'px' }">{{ row[column.prop] }}</td>
      </tr>
    </tbody>
  </table>
</div>

.table-container {
  position: relative;
  overflow: hidden;
}

.table {
  position: relative;
  width: 100%;
}

.table thead {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
}

.table tbody {
  position: relative;
}

.table tr {
  position: absolute;
  top: 0;
  left: 0;
}

.table th,
.table td {
  padding: 10px;
}