From 4ed2bb9e57b53589e1e93ab7e8153131a5ca382d Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Tue, 22 Nov 2022 10:56:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20`@pureadmin/table`?=
 =?UTF-8?q?=20=E5=9B=BE=E5=83=8F=E9=A2=84=E8=A7=88=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/pure-table/components/data.ts       | 16 +++++-
 .../pure-table/components/imgPreview.vue      | 50 +++++++++++++++++++
 src/views/pure-table/components/index.ts      |  4 +-
 src/views/pure-table/list.tsx                 |  9 +++-
 4 files changed, 76 insertions(+), 3 deletions(-)
 create mode 100644 src/views/pure-table/components/imgPreview.vue

diff --git a/src/views/pure-table/components/data.ts b/src/views/pure-table/components/data.ts
index 908c6e0fd..2a6c1d69e 100644
--- a/src/views/pure-table/components/data.ts
+++ b/src/views/pure-table/components/data.ts
@@ -56,6 +56,14 @@ const tableDataMore = cloneData.map(item =>
   })
 );
 
+const tableDataImage = cloneData.map((item, index) =>
+  Object.assign(item, {
+    image: `https://xiaoxian521.github.io/pure-admin-table/imgs/${
+      index + 1
+    }.jpg`
+  })
+);
+
 const tableDataSortable = cloneData.map((item, index) =>
   Object.assign(item, {
     date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}`
@@ -282,4 +290,10 @@ const tableDataExpand = [
   }
 ];
 
-export { tableData, tableDataMore, tableDataSortable, tableDataExpand };
+export {
+  tableData,
+  tableDataMore,
+  tableDataImage,
+  tableDataExpand,
+  tableDataSortable
+};
diff --git a/src/views/pure-table/components/imgPreview.vue b/src/views/pure-table/components/imgPreview.vue
new file mode 100644
index 000000000..8751a499e
--- /dev/null
+++ b/src/views/pure-table/components/imgPreview.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { tableDataImage } from "./data";
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address"
+  },
+  {
+    label: "视频",
+    slot: "video"
+  },
+  {
+    label: "图像",
+    slot: "image"
+  }
+];
+</script>
+
+<template>
+  <pure-table :data="tableDataImage" :columns="columns">
+    <template #video>
+      <video width="180" height="180" controls>
+        <source
+          src="https://yiming_chang.gitee.io/pure-admin-doc/video/url.mov"
+          type="video/mp4"
+        />
+      </video>
+    </template>
+    <template #image="{ row, index }">
+      <el-image
+        preview-teleported
+        loading="lazy"
+        :src="row.image"
+        :preview-src-list="tableDataImage.map(v => v.image)"
+        :initial-index="index"
+        fit="cover"
+        class="w-[100px] h-[100px]"
+      />
+    </template>
+  </pure-table>
+</template>
diff --git a/src/views/pure-table/components/index.ts b/src/views/pure-table/components/index.ts
index c93246c92..a5c4d96d2 100644
--- a/src/views/pure-table/components/index.ts
+++ b/src/views/pure-table/components/index.ts
@@ -19,6 +19,7 @@ import Merge from "./merge.vue";
 import CustomIndex from "./customIndex.vue";
 import Layout from "./layout.vue";
 import NestProp from "./nestProp.vue";
+import ImgPreview from "./imgPreview.vue";
 
 export {
   Base,
@@ -41,5 +42,6 @@ export {
   Merge,
   CustomIndex,
   Layout,
-  NestProp
+  NestProp,
+  ImgPreview
 };
diff --git a/src/views/pure-table/list.tsx b/src/views/pure-table/list.tsx
index 254c65285..ee329adeb 100644
--- a/src/views/pure-table/list.tsx
+++ b/src/views/pure-table/list.tsx
@@ -19,7 +19,8 @@ import {
   Merge,
   CustomIndex,
   Layout,
-  NestProp
+  NestProp,
+  ImgPreview
 } from "./components";
 
 const rendContent = (val: string) =>
@@ -157,5 +158,11 @@ export const list = [
     content: rendContent("nestProp"),
     title: "多种数据格式（深层结构）",
     component: NestProp
+  },
+  {
+    key: "imgPreview",
+    content: rendContent("imgPreview"),
+    title: "图像预览",
+    component: ImgPreview
   }
 ];