【Vue】element UI 表格展示图片分页后图片不能及时替换

使用element的table展示数据，其中有一列中展示有图片，分页切换后展示的还是前一页的图片，过一段时间后才会陆续加载出当前数据的图片

怎么实时的展示正确的图片，或者切换分页后隐藏前一页的图片
【Vue】element UI 表格展示图片分页后图片不能及时替换

 <el-table-column label="图片" width="180">
<template scope="scope">
<image :src="https://segmentfault.com/q/1010000019348383/scope.row.image" width="100" height="100"/>
</template>
</el-table-column>

回答

分页切换后给表格那里加个loading缓冲一下，或者切换的时候把表格数据清掉。

  1. 加载loading-图片设置懒加载-或者放置一个默认图片在替换

  2. 使用=赋值 应该不会存在图片替换缓慢的情况 是在不行使用 this.$nextTick(()=>{}) 下实现赋值

试试用id给 img 加个key

this.$forceUpdate()

可以通过this.tableData.slice(start, start + this.pageSize),通过页码和每页展示的数量去slice截取

使用ElementUI里面的el-image组件就可避免类似问题

以上是 【Vue】element UI 表格展示图片分页后图片不能及时替换 的全部内容， 来源链接： utcz.com/a/80221.html

回到顶部