el-image的配套使用(表格,表单)

1. 配合table在一起使用,支持预览

此处使用场景是表格中只显示一张图片
preview-src-list只支持数组,故需要将单个字符串转换为转换为字符串数组

js 复制代码
      <el-table-column  align="center"  label="二维码">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.qrSrc"
            :preview-src-list="toArray(scope.row.qrSrc)"
          >
          </el-image>
        </template>
      </el-table-column>
      //图片预览转换将单个图片地址转换为图片数组
      toArray(a) {
        let t = []
        t.push(a)
        return t;
      },

2. 配合form表单显示单张图片

此处是配合el-dialog在一起作为回显使用的

js 复制代码
          <el-form-item   label="检查人签字:">
            <el-image  
            style="width: 200px; 
            height: 100px"
            :src="checkedSignSrc" >
            </el-image>
          </el-form-item>
         

          
  .img_contain{
    display: flex;
    /*border: 1px solid  red;*/
    flex-wrap: wrap;
  }

3. 配合form表单显示多张图片且支持预览功能

js 复制代码
          <el-form-item  label="现场图片:" >
            <div class="img_contain">
              <el-image v-for="item in urls"
                style="width: 100px; 
                height: 100px;
                margin-left: 5px;
                margin-top: 5px"
                :src="item"
                :preview-src-list="urls"
                fit="fill">
                </el-image>
            </div>
          </el-form-item>

css代码

css 复制代码
  .img_contain{
    display: flex;
    flex-wrap: wrap;
  }
相关推荐
芒果茶叶22 分钟前
并行SSR,SSR并行加载
前端·javascript·架构
vortex535 分钟前
解决 Kali 中 Firefox 下载语言包和插件速度慢的问题:配置国内镜像加速
前端·firefox·腾讯云
修仙的人38 分钟前
Rust + WebAssembly 实战!别再听说,学会使用!
前端·rust
maxine40 分钟前
JS Entry和 HTML Entry
前端
用户633107761236643 分钟前
Who is a Promise?
前端
用户785127814701 小时前
从 0 到 1 落地淘宝商品 API 开发:手把手教你采集、分析与避坑(含完整可运行代码)
vue.js
威风的虫1 小时前
JavaScript中的axios
开发语言·javascript·ecmascript
比老马还六1 小时前
Blockly元组积木开发
前端
笨笨狗吞噬者1 小时前
【uniapp】小程序体积优化,JSON文件压缩
前端·微信小程序·uni-app
bot5556661 小时前
“企业微信iPad协议”静默 72 小时:一台被遗忘的测试机如何成为私域的逃生梯
javascript·面试