element ui使用分页插件导致第二页数据出问题解决办法
出问题时候的代码
<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 发生改变时, 会随时被更新,因此会触发过渡。