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

Question

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

怎么实时的展示正确的图片，或者切换分页后隐藏前一页的图片

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

Answer 1

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

Answer 2

1. 加载loading-图片设置懒加载-或者放置一个默认图片在替换
2. 使用=赋值 应该不会存在图片替换缓慢的情况 是在不行使用 this.$nextTick(()=>{}) 下实现赋值

Answer 3

试试用id给 img 加个key

Answer 4

this.$forceUpdate()

Answer 5

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

Answer 6

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