Element UI 表格中实现 查看大图效果（前后端）

Element UI 表格中实现 查看大图效果（前后端）

一、官网的案例

连接地址：https://element.eleme.cn/#/zh-CN/component/image

<div class="demo-image__preview">
  <el-image 
    style="width: 100px; height: 100px"
    :src="url"  
    :preview-src-list="srcList"> 
    <!-- src 绑定第一张图片 -->
    <!-- preview-src-list 绑定要预览的图片列表 -->
  </el-image>
</div>

<script>
  export default {
    data() {
      return { //url:第一张图片的地址；srcList:所有预览图的地址列表
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
      }
    }
  }
</script>

二、我的实现

1.HTML表格

			<!-- tableData 表格的数据列表 -->
            <el-table :data="tableData" border class="table" header-cell-class-name="table-header">
                 //...
                <el-table-column label="图片详情(查看大图)" align="center"
                    ><template slot-scope="scope">
                    <!-- images 后端返回的图片列表字段名 -->
                    <!-- src 先把第一张图片渲染到页面中 scope.row.images[0] -->
                    <!-- preview-src-list 处理后的图片地址列表 -->
                    <!-- handlePreviewClick 点击预览的时候会执行的函数 -->
                        <el-image
                            @click="handlePreviewClick(scope.row.images)"
                            class="table-td-thumb"
                            :src="scope.row.images[0]"
                            :preview-src-list="previewSrcList"
                        ></el-image>
                    </template>
                </el-table-column>
                 //...
            </el-table>

2.JS部分

export default { 
    data() {
        return {  
            tableData: [],   
            url: '',  
            previewSrcList: []
        };
    },  
    methods: {  
            // 获取表格数据信息
        getData() {
        	//发送请求给后端 get_goodsSKU()
            get_goodsSKU().then((res) => {
                if (res.status == '00000') {
                	//后端返回的数据 res.data  
                    res.data = res.data.map((item, index) => {
                    	//因为后端返回的图片列表是个字符串，每个图片地址用逗号分隔开了，所以就需要先处理一下，形成数组形式的图片列表
                        var imgList = item.images.split(',');
                        //又因为，后端的图片地址没有返回全部地址，只是一部分，所以需要给每一项都补充完整
                        var tmpList = [];
                        imgList.map((item, index) => {
                            tmpList.push('https://cdnongyuan-1305168109.cos.ap-chengdu.myqcloud.com/' + item);
                        });
                        //形成完整正确的图片列表，重新赋值给images 
                        item.images = tmpList;
                        return item;
                    }); 
                    this.tableData = res.data;
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        // 预览图片的列表
        // 将图片列表作为参数，传递给previewSrcList，那么预览的时候就能预览到所点击的表格行的图片列表
        handlePreviewClick(imgList) {
            this.previewSrcList = imgList;
        }  
    }
	}
}

这是我们后端返回的images字段的格式，可以数据格式的需要进行图片列表的 切割 和 补全 操作

三、踩坑总结

在preview中定义的 首图src属性 和 图片列表preview-src-list属性 ，一定要在data中定义后再用

<el-image                              
   @click="handlePreviewClick(scope.row.images)"
   class="table-td-thumb"
   :src="scope.row.images[0]"
   :preview-src-list="previewSrcList"
></el-image>

data() {
        return {  
            tableData: [],   
            url: '',  
            previewSrcList: []
        };
    }