refactor(PageContent): ♻️ 支持图片显示

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">

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

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