feat: 新增 @pureadmin/table 图像预览示例

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

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>

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

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