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;
  }
相关推荐
中微子1 小时前
React状态管理最佳实践
前端
烛阴1 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子1 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...1 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情1 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz2 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
华子w9089258592 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
天天扭码2 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw52 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !2 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app