Browse Source

feat: add image display support in table component for enhanced user experience

lengleng 1 month ago
parent
commit
d95abfe81c
1 changed files with 13 additions and 0 deletions
  1. 13 0
      multiple/主子表格.vue

+ 13 - 0
multiple/主子表格.vue

@@ -141,6 +141,19 @@
             <dict-tag :options="$field.fieldDict" :value="scope.row.${field.attrName}"></dict-tag>
             <dict-tag :options="$field.fieldDict" :value="scope.row.${field.attrName}"></dict-tag>
           </template>
           </template>
         </el-table-column>
         </el-table-column>
+#elseif($field.formType == 'upload-img')
+        <el-table-column prop="${field.attrName}" label="#if(${field.fieldComment})${field.fieldComment}#else${field.attrName}#end" width="120">
+          <template #default="scope">
+            <el-image 
+              v-if="scope.row.${field.attrName}"
+              :src="baseURL + scope.row.${field.attrName}" 
+              fit="cover"
+              class="w-20 h-20 rounded"
+              :preview-teleported="true"
+            />
+            <span v-else class="text-gray-400">暂无图片</span>
+          </template>
+        </el-table-column>
 #else
 #else
         <el-table-column 
         <el-table-column 
           prop="${field.attrName}" 
           prop="${field.attrName}"