From a60de1457f35b85bbd42187759d3213c9eb0da2a Mon Sep 17 00:00:00 2001
From: cshaptx4869 <994774638@qq.com>
Date: Fri, 10 May 2024 21:21:22 +0800
Subject: [PATCH] =?UTF-8?q?refactor(PageContent):=20:recycle:=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=9B=BE=E7=89=87=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PageContent/index.vue  | 31 ++++++++++++++++++++++++++-
 src/typings/components.d.ts           |  1 +
 src/views/demo/curd/config/content.ts |  1 +
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/components/PageContent/index.vue b/src/components/PageContent/index.vue
index a0b0a961..d5fa54f3 100644
--- a/src/components/PageContent/index.vue
+++ b/src/components/PageContent/index.vue
@@ -79,8 +79,37 @@
       @selection-change="handleSelectionChange"
     >
       <template v-for="col in contentConfig.cols" :key="col.prop">
+        <!-- 显示图片 -->
+        <template v-if="col.templet === 'image'">
+          <el-table-column v-bind="col">
+            <template #default="scope">
+              <template v-if="Array.isArray(scope.row[col.prop])">
+                <template
+                  v-for="(item, index) in scope.row[col.prop]"
+                  :key="item"
+                >
+                  <el-image
+                    :src="item"
+                    :preview-src-list="scope.row[col.prop]"
+                    :initial-index="index"
+                    :preview-teleported="true"
+                    :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`"
+                  />
+                </template>
+              </template>
+              <template v-else>
+                <el-image
+                  :src="scope.row[col.prop]"
+                  :preview-src-list="[scope.row[col.prop]]"
+                  :preview-teleported="true"
+                  :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`"
+                />
+              </template>
+            </template>
+          </el-table-column>
+        </template>
         <!-- 列操作栏 -->
-        <template v-if="col.templet === 'tool'">
+        <template v-else-if="col.templet === 'tool'">
           <el-table-column v-bind="col">
             <template #default="scope">
               <template v-for="item in col.operat" :key="item">
diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
index 0f5e2cc7..45b7ae2b 100644
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@@ -33,6 +33,7 @@ declare module "vue" {
     ElForm: (typeof import("element-plus/es"))["ElForm"];
     ElFormItem: (typeof import("element-plus/es"))["ElFormItem"];
     ElIcon: (typeof import("element-plus/es"))["ElIcon"];
+    ElImage: (typeof import("element-plus/es"))["ElImage"];
     ElInput: (typeof import("element-plus/es"))["ElInput"];
     ElInputNumber: (typeof import("element-plus/es"))["ElInputNumber"];
     ElMenu: (typeof import("element-plus/es"))["ElMenu"];
diff --git a/src/views/demo/curd/config/content.ts b/src/views/demo/curd/config/content.ts
index 04a3e1cc..a69f5943 100644
--- a/src/views/demo/curd/config/content.ts
+++ b/src/views/demo/curd/config/content.ts
@@ -36,6 +36,7 @@ const contentConfig: IContentConfig<UserQuery> = {
     { type: "selection", width: 50, align: "center" },
     { label: "编号", align: "center", prop: "id", width: 100 },
     { label: "用户名", align: "center", prop: "username" },
+    { label: "头像", align: "center", prop: "avatar", templet: "image" },
     { label: "用户昵称", align: "center", prop: "nickname", width: 120 },
     { label: "性别", align: "center", prop: "genderLabel", width: 100 },
     { label: "部门", align: "center", prop: "deptName", width: 120 },