区域管理国旗替换

bms-front/src/views/data/region/index.vue

@@ -70,7 +70,8 @@
          </template>
 
          <template #col-flagEmoji="{ row }">
-            <span style="font-size: 18px">{{ row.flagEmoji }}</span>
+            <img v-if="row.flagUrl" :src="row.flagUrl" alt="" class="region-flag" />
+            <span v-else class="region-flag-emoji">{{ row.flagEmoji }}</span>
          </template>
 
          <template #col-action="{ row }">
@@ -267,7 +268,7 @@ const searchColumns = [
 // 表格列配置
 const columns = [
    { label: "区域ID", prop: "regionId", align: "center", width: 80 },
-   { label: "国旗", prop: "flagEmoji", align: "center", width: 60 },
+   { label: "国旗", prop: "flagEmoji", align: "center", width: 70 },
    { label: "中文名", prop: "countryNameCn", align: "center" },
    { label: "英文名", prop: "countryNameEn", align: "center" },
    { label: "国家代码", prop: "countryCode2", align: "center", width: 80 },
@@ -475,3 +476,17 @@ onBeforeUnmount(() => {
    }
 })
 </script>
+
+<style scoped>
+.region-flag {
+   width: 30px;
+   height: 30px;
+   object-fit: contain;
+   display: block;
+   margin: 0 auto;
+}
+.region-flag-emoji {
+   font-size: 18px;
+   line-height: 30px;
+}
+</style>