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;
  }
相关推荐
亿元程序员2 分钟前
每次游戏卡的时候,策划总问:是不是DrawCall太高了?
前端
golang学习记6 分钟前
刚刚,OpenAI首个AI浏览器发布!颠覆Chrome,彻底改变你上网的方式|附实测
前端
吃饺子不吃馅12 分钟前
项目上localStorage太杂乱,逼我写了一个可视化浏览器插件
前端·javascript·chrome
golang学习记13 分钟前
从0 死磕全栈之Next.js 环境变量实战指南:企业级多环境(dev/test/prod)配置最佳实践
前端
.生产的驴39 分钟前
React 集成Redux数据状态管理 数据共享 全局共享
前端·javascript·react.js·前端框架·css3·html5·safari
IT_陈寒41 分钟前
Redis性能优化的7个隐藏技巧:从慢查询到亿级QPS的实战经验分享
前端·人工智能·后端
艾小码1 小时前
ES6+革命:8大特性让你的JavaScript代码质量翻倍
前端·javascript
两个西柚呀1 小时前
Vue组件的一些底层细节
前端·javascript·vue.js
paopaokaka_luck1 小时前
基于SpringBoot+Vue的DIY手工社预约管理系统(Echarts图形化、腾讯地图API)
java·vue.js·人工智能·spring boot·后端·echarts
IT技术分享社区1 小时前
前端:浏览器Content Security Policy 安全策略介绍和用法
前端·前端开发