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

Z时代
2024-02-05
分类：IT

 <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=[
            '/wp-content/uploads/new2024/02/20240204vue1234/f01c15bb73e1ef3793e64e6b7bbccjpeg1276.jpeg',
            '/wp-content/uploads/new2024/02/20240204vue1234/aeffeb4de74e2fde4bd74fc7b4486jpeg1278.jpeg'  
            ]
        })    }

回答：

async getSrcList(row){
    console.log(row.id)
    await this.$nextTick();
    this.srcList=[
        '/wp-content/uploads/new2024/02/20240204vue1234/f01c15bb73e1ef3793e64e6b7bbccjpeg1276.jpeg',
        '/wp-content/uploads/new2024/02/20240204vue1234/aeffeb4de74e2fde4bd74fc7b4486jpeg1278.jpeg'  
    ]
}

回答：

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

回答：

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

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

getTableData(){
  featchTableData(queryParams).then(res => {
     this.tableData = res.data.map(item => ({
       ...item,
       // 这里直接处理好预览图列表
       urlList: ['/wp-content/uploads/new2024/02/20240204vue1234/f01c15bb73e1ef3793e64e6b7bbccjpeg1276.jpeg', '/wp-content/uploads/new2024/02/20240204vue1234/aeffeb4de74e2fde4bd74fc7b4486jpeg1278.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 ['/wp-content/uploads/new2024/02/20240204vue1234/f01c15bb73e1ef3793e64e6b7bbccjpeg1276.jpeg', '/wp-content/uploads/new2024/02/20240204vue1234/aeffeb4de74e2fde4bd74fc7b4486jpeg1278.jpeg']
    }
  }}