el-image的配套使用（表格，表单）

陈丹阳（滁州学院）2024-08-25 9:11

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;
  }