vue中table列表中多张图片展示

最新推荐文章于 2024-05-16 13:17:22 发布

原创最新推荐文章于 2024-05-16 13:17:22 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

博客内容涉及处理从API获取的数据，特别是处理一个包含父子表结构的响应。代码尝试将图片路径分割并显示在表格的图片列中，但在js中执行分割操作后，图片未能按预期显示。问题可能出在数据赋值或者图片显示组件的配置上。

      this.form = response.data;
        this.ewOpenHoleRecordList = response.data.ewOpenHoleRecordList; // 这个是父子表的结构，这个是字表显示图片
        for (var i = 0; i < this.ewOpenHoleRecordList.length; i++) { // 循环字表数据
          var img = this.ewOpenHoleRecordList[i].endPhoto // 将图片赋值给img
           if (img != null || img != undefined) { // 判读不上传图片的情况或者一张的时候
             var imgList = img.split(",") // 按照逗号进行分割
             this.ewOpenHoleRecordList.endPhoto = imgList // 将数据重新赋值给列表字段
           }
          console.log(this.ewOpenHoleRecordList.endPhoto,"这个是图片")
        }

列表显示

<el-table-column label="结束照片" align="center" prop="endPhoto" >
            <template slot-scope="scope" v-if="scope.row.endPhoto">
              <div  v-for="item in scope.row.endPhoto.split(',')">
                <el-image
                  style="width: 60px; height: 60px; border-radius: 50%"
                  :src="imgUpop + item"
                  :preview-src-list="[imgUpop + item]">
                </el-image>
              </div>
            </template>
          </el-table-column>

在js中进行分割之后不起作用，也不清楚为什么，