element ui使用分页插件导致第二页数据出问题解决办法

Posted 2021-03-11 eternityz

出问题时候的代码

<div class="card-display">
  <el-row>
    <el-col :span="6"
            v-for="(item, index) in result"
            :key="index"
            :offset="index > 0 ? 0 : 0">
      <cards :ids="randomName()"
             :equityBalance="item.equityData"
             :account="item.account"
             :item="item"
             class="card-sig"></cards>
    </el-col>
  </el-row>
</div> 
<div class="block">
  <el-pagination @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                 :page-sizes="[8, 16, 24, 32]"
                 :page-size="8"
                 layout="total, sizes, prev, pager, next, jumper"
                 :total="total">
  </el-pagination>
</div>

问题描述:

第一页时候的数据正常,第二页只有两条数据的时候,尽管会有动作请求数据库返回正确的第二页的两条数据,但是页面不会刷新,使用的还是第一页的前两条信息

问题排查

问题出在el-col标签中的key值上面,因为key值使用的是index,第一页的key值分别为0-7或者(1-8),加载第二页的时候,key值还是(0-7)或者(1-8),此时第二页和第一页的key值是重复的,vue认为还是一样的node,此时就不会重新渲染,使用的还是第一页的前两条数据.

解决办法

将每个key值设置为独一无二的值,这样当有新数据的时候,就会重新渲染,保证数值正确

<div class="card-display">
  <el-row>
    <el-col :span="6"
            v-for="(item, index) in result"
            :key="item.account"
            :offset="index > 0 ? 0 : 0">
      <cards :ids="randomName()"
             :equityBalance="item.equityData"
             :account="item.account"
             :item="item"
             class="card-sig"></cards>
    </el-col>
  </el-row>
</div> 
<div class="block">
  <el-pagination @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                 :page-sizes="[8, 16, 24, 32]"
                 :page-size="8"
                 layout="total, sizes, prev, pager, next, jumper"
                 :total="total">
  </el-pagination>
</div>

此时key中的item.account是独一无二的值,保证不会出问题了

vue官方key解释

• 预期：number | string

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

最常见的用例是结合 v-for：

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

它也可以用于强制替换元素/组件而不是重复使用它。

当你遇到如下场景时它可能会很有用：

完整地触发组件的生命周期钩子
触发过渡
例如：

<transition>
  <span :key="text">{{ text }}</span>
</transition>

当 text 发生改变时， 会随时被更新，因此会触发过渡。