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

最新推荐文章于 2024-06-22 17:08:13 发布

可恨的资本家

最新推荐文章于 2024-06-22 17:08:13 发布

阅读量1.6k

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Tttrycatch/article/details/126851909

版权

      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中进行分割之后不起作用，也不清楚为什么，