elementui的Image组件的大图预览功能，第一次点击图片的时候并没有出现大图，可能是渲染不及时的问题？

Question

 <el-image 
                  style="width: 100px; height: 100px"
                  :src="url"
                  @click="getSrcList(scope.row)" 
                  :preview-src-list="srcList">
 </el-image>

 getSrcList(row){
        console.log(row.id)
        this.$nextTick(()=>{
           this.srcList=[
            'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
            'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'  
            ]
        })
    }

elementui的Image组件的大图预览功能，第一次点击图片的时候并没有出现大图，可能是渲染不及时的问题？

Answer 1

async getSrcList(row){
    console.log(row.id)
    await this.$nextTick();
    this.srcList=[
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'  
    ]
}

Answer 2

把srcList直接放data里面就可以了

Answer 3

不要点击后在去赋值，特别还是加上了 $nextTick。
我猜测你的 url 是循环出来的，或者说是在 table 内部的，所以直接在获取到 tableData 的时候把预览地址处理好。然后再循环或者table 内部直接赋值。

比如说接收数据的时候这样处理：

getTableData(){
  featchTableData(queryParams).then(res => {
     this.tableData = res.data.map(item => ({
       ...item,
       // 这里直接处理好预览图列表
       urlList: ['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg', 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg']
     }))
  })
}

然后直接绑定上去就好了。

<el-image :src="row.url" :previe-src-list="row.urlList" />

---

当然如果你懒得这样处理，也可以稍微改写一下通过函数返回即可：

<template>
  ...
  <el-image 
    style="width: 100px; height: 100px"
    :src="url"
    :preview-src-list="getSrcList(scope.row)">
  </el-image>
  ...
</template>

<script>
export default {
  ...
  methods: {
    ...
    getSrcList(row){
      return ['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg', 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg']
    }
  }
}