大数据表格渲染_完美解决表格渲染乱序问题

需求是这样的，表格滚动加载时，假如我们在表格滚动之前，我们选中了一些多选框，那么下拉加载之后，我们需要将之前的选中的数据依然保持选中状态，而不是数据一下拉加载，就重新渲染了，选中的数据就恢复到未选中状态，这个很简单，element-ui 文档已经给出一个属性 :reserve-selection="true" 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）,这样就解决了问题了

<el-table-column :reserve-selection="true" type="selection" width="100"></el-table-column>

但是接下来问题来了，我一下拉加载数据，控制台就会报错下面这个经过：

经过百度之后，发现是说 key 重复了

后来发现是下拉加载方法少加了下面这段代码：

/**
     * 描述
     * @date 2020-10-14
     * @description 下拉加载
     * @returns {any}
     */
    loadMore() {
      this.pageForm.current = this.pageForm.current + 1
      this.onSubmit(false)
    },

但是选中之后背景色是错位的，是导致数据与渲染出来的表格不对应，加了 v-if 受到了影响：

效果如下，数据与表格对应的数据是混乱的，不是一一对应的

下面把 v-if 删除之后，数据表格渲染就正常了

效果如下：