elementui 单图片预览

elementUI提供了一个示例代码，可以实现单图片预览的功能。你可以通过以下步骤来实现：
1. 首先，在需要展示图片的地方，使用`<el-table-column>`标签，将图片以小图片的形式展示出来。例如：

   <el-table-column align="center" label="认证资料">
     <template slot-scope="scope">
       <img class="img" :src="scope.row.img" @click="showEditDialog(scope.row.img)"/>
     </template>
   </el-table-column>

2. 在Vue的`data`方法中，添加一个`editDialogVisible`属性和一个`img`属性，用来控制图片详情的显示与隐藏，并且初始化为`false`和空字符串。例如：

   data() {
     return {
       editDialogVisible: false,
       img: "",
     }
   },

3. 在Vue的`methods`方法中，添加一个`showEditDialog`方法，用来预览图片。该方法接收一个参数`img`，将其赋值给`img`属性，并将`editDialogVisible`属性设置为`true`，以显示图片详情。例如：

   methods: {
     showEditDialog(img) {
       this.img = img;
       this.editDialogVisible = true;
     },
   },

4. 最后，在`<el-dialog>`标签中，使用`img`属性显示放大区域的图片详情。例如：

   <el-dialog title="图片详情" :visible.sync="editDialogVisible" width="66%">
     <img class="img2" :src="img">
   </el-dialog>

这样，当你点击小图片时，就会弹出一个对话框，显示放大区域的图片详情。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>