From a84191040610a3209b4ffc029b328410cf5c6e86 Mon Sep 17 00:00:00 2001
From: hooray <304327508@qq.com>
Date: Mon, 19 Dec 2022 22:15:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=A2=84=E8=A7=88=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E6=97=A0=E6=B3=95=E5=AE=8C=E6=95=B4=E8=A6=86=E7=9B=96?=
 =?UTF-8?q?=20el-table=20=E5=9B=BA=E5=AE=9A=E5=88=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ImagePreview/index.vue         |  2 +-
 src/components/ImageUpload/index.vue          |  2 +-
 src/components/ImagesUpload/index.vue         |  2 +-
 .../image.preview.demo.vue                    | 49 ++++++++++++++---
 .../component_extend_example/upload.demo.vue  | 52 ++++++++++++++++++-
 5 files changed, 97 insertions(+), 10 deletions(-)

diff --git a/src/components/ImagePreview/index.vue b/src/components/ImagePreview/index.vue
index cd6fc591..f8f9032c 100644
--- a/src/components/ImagePreview/index.vue
+++ b/src/components/ImagePreview/index.vue
@@ -24,7 +24,7 @@ const realHeight = computed(() => {
 </script>
 
 <template>
-  <el-image :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[src]">
+  <el-image :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[src]" preview-teleported>
     <template #error>
       <div class="image-slot">
         <el-icon>
diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index dc65d62e..1577200f 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -147,7 +147,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
         <el-alert :title="`上传图片支持 ${ext.join(' / ')} 格式，且图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}`" type="info" show-icon :closable="false" />
       </div>
     </div>
-    <el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="[url]" @close="previewClose" />
+    <el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="[url]" teleported @close="previewClose" />
   </div>
 </template>
 
diff --git a/src/components/ImagesUpload/index.vue b/src/components/ImagesUpload/index.vue
index 9d01e3aa..57dd62dd 100644
--- a/src/components/ImagesUpload/index.vue
+++ b/src/components/ImagesUpload/index.vue
@@ -174,7 +174,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
         <el-alert :title="`上传图片支持 ${ext.join(' / ')} 格式，单张图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}，且图片数量不超过 ${max} 张`" type="info" show-icon :closable="false" />
       </div>
     </div>
-    <el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="url as string[]" :initial-index="uploadData.dialogImageIndex" @close="previewClose" />
+    <el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="url as string[]" :initial-index="uploadData.dialogImageIndex" teleported @close="previewClose" />
   </div>
 </template>
 
diff --git a/src/views/component_extend_example/image.preview.demo.vue b/src/views/component_extend_example/image.preview.demo.vue
index 65fa2a8c..969abd2e 100644
--- a/src/views/component_extend_example/image.preview.demo.vue
+++ b/src/views/component_extend_example/image.preview.demo.vue
@@ -3,18 +3,55 @@ meta:
   enabled: false
 </route>
 
+<script lang="ts" setup>
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    src: 'https://hooray.gitee.io/fantastic-admin/logo.png',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    src: 'https://hooray.gitee.io/fantastic-admin/logo.png',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    src: 'https://hooray.gitee.io/fantastic-admin/logo.png',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    src: 'https://hooray.gitee.io/fantastic-admin/logo.png',
+  },
+]
+</script>
+
 <template>
   <div>
     <page-header title="图片预览" content="ImagePreview" />
     <page-main>
-      <div>
-        <image-preview src="https://hooray.gitee.io/fantastic-admin/logo.png" :width="200" />
-      </div>
+      <image-preview src="https://hooray.gitee.io/fantastic-admin/logo.png" :width="200" />
     </page-main>
     <page-main title="图片加载失败时">
-      <div>
-        <image-preview src="http://www.baidu.com" width="100px" height="100px" />
-      </div>
+      <image-preview src="http://www.baidu.com" width="100px" height="100px" />
+    </page-main>
+    <page-main title="结合 el-table 使用">
+      <el-table :data="tableData" style="width: 100%;">
+        <el-table-column prop="date" label="日期" width="180" fixed="left" />
+        <el-table-column prop="name" label="姓名" width="180" />
+        <el-table-column prop="address" label="地址" />
+        <el-table-column label="图片">
+          <template #default="{ row }">
+            <image-preview :src="row.src" width="100px" height="100px" />
+          </template>
+        </el-table-column>
+      </el-table>
     </page-main>
   </div>
 </template>
diff --git a/src/views/component_extend_example/upload.demo.vue b/src/views/component_extend_example/upload.demo.vue
index 1158cfb5..ce38b839 100644
--- a/src/views/component_extend_example/upload.demo.vue
+++ b/src/views/component_extend_example/upload.demo.vue
@@ -7,7 +7,7 @@ meta:
 import type { UploadProps } from 'element-plus'
 import { ElMessage } from 'element-plus'
 
-const image = ref('https://picsum.photos/400')
+const image = ref('https://picsum.photos/750/450')
 const images = ref([
   'https://picsum.photos/400',
   'https://picsum.photos/600',
@@ -48,6 +48,41 @@ const handleSuccess3: UploadProps['onSuccess'] = (res, file, fileList) => {
     ElMessage.warning(res.error)
   }
 }
+
+const tableData = [
+  {
+    image: 'https://picsum.photos/750/450',
+    images: [
+      'https://picsum.photos/400',
+      'https://picsum.photos/600',
+      'https://picsum.photos/500',
+    ],
+  },
+  {
+    image: 'https://picsum.photos/750/450',
+    images: [
+      'https://picsum.photos/400',
+      'https://picsum.photos/600',
+      'https://picsum.photos/500',
+    ],
+  },
+  {
+    image: 'https://picsum.photos/750/450',
+    images: [
+      'https://picsum.photos/400',
+      'https://picsum.photos/600',
+      'https://picsum.photos/500',
+    ],
+  },
+  {
+    image: 'https://picsum.photos/750/450',
+    images: [
+      'https://picsum.photos/400',
+      'https://picsum.photos/600',
+      'https://picsum.photos/500',
+    ],
+  },
+]
 </script>
 
 <template>
@@ -69,5 +104,20 @@ const handleSuccess3: UploadProps['onSuccess'] = (res, file, fileList) => {
     <page-main title="文件上传（默认最多3个）">
       <file-upload :files="files" action="https://console-mock.apipost.cn/app/mock/project/1f50f1da-5189-4282-d3c7-c133a514c5a8/upload/file" @on-success="handleSuccess3" />
     </page-main>
+    <page-main title="结合 el-table 使用">
+      <el-table :data="tableData" style="width: 100%;">
+        <el-table-column type="index" width="50" fixed="left" />
+        <el-table-column label="单张图片">
+          <template #default="{ row }">
+            <image-upload v-model:url="row.image" action="https://console-mock.apipost.cn/app/mock/project/1f50f1da-5189-4282-d3c7-c133a514c5a8/upload/image" name="image" :width="250" :height="150" @on-success="handleSuccess1" />
+          </template>
+        </el-table-column>
+        <el-table-column label="多张图片">
+          <template #default="{ row }">
+            <images-upload v-model:url="row.images" action="https://console-mock.apipost.cn/app/mock/project/1f50f1da-5189-4282-d3c7-c133a514c5a8/upload/image" name="image" @on-success="handleSuccess2" />
+          </template>
+        </el-table-column>
+      </el-table>
+    </page-main>
   </div>
 </template>