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;
  }
相关推荐
打不着的大喇叭36 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code42 分钟前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟44 分钟前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了1 小时前
Vue 3 中的组件通信与组件思想详解
vue.js
susnm1 小时前
Dioxus 与数据库协作
前端·rust