临沂市住房和城乡建设厅网站,视频教程网站,怎么查找网站建设,.net做网站开发1. 配合table在一起使用#xff0c;支持预览 此处使用场景是表格中只显示一张图片 preview-src-list只支持数组#xff0c;故需要将单个字符串转换为转换为字符串数组 el-table-column aligncenter label二维码template slot-scope支持预览 此处使用场景是表格中只显示一张图片 preview-src-list只支持数组故需要将单个字符串转换为转换为字符串数组 el-table-column aligncenter label二维码template slot-scopescopeel-imagestylewidth: 100px; height: 100px:srcscope.row.qrSrc:preview-src-listtoArray(scope.row.qrSrc)/el-image/template/el-table-column//图片预览转换将单个图片地址转换为图片数组toArray(a) {let t []t.push(a)return t;},2. 配合form表单显示单张图片 此处是配合el-dialog在一起作为回显使用的 el-form-item label检查人签字el-image stylewidth: 200px; height: 100px:srccheckedSignSrc /el-image/el-form-item.img_contain{display: flex;/*border: 1px solid red;*/flex-wrap: wrap;}3. 配合form表单显示多张图片且支持预览功能 el-form-item label现场图片 div classimg_containel-image v-foritem in urlsstylewidth: 100px; height: 100px;margin-left: 5px;margin-top: 5px:srcitem:preview-src-listurlsfitfill/el-image/div/el-form-itemcss代码 .img_contain{display: flex;flex-wrap: wrap;}
