多彩icon解决

src/assets/styles/index.scss

@@ -221,4 +221,11 @@ aside {
 .public_height_dialog {
   height: calc(100vh - 260px);
   overflow: auto;
+}
+
+.icon {
+  width: 1em; height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
 }

src/main.js

@@ -13,7 +13,7 @@ import App from './App'
 import store from './store'
 import router from './router'
 import directive from './directive' // directive
-
+import './assets/styles/iconfont.js'
 
 
 // 注册指令

src/views/customer/portrait/com/CustomerInfo.vue

@@ -16,8 +16,11 @@
     </div>
     <div class="line" style="word-break: break-all">
       <span class="title_">地址：</span>
-      <i :class="'iconfont icon-' + detailsData.countryIcon" style="margin-right: 10px"></i>
-      <span>
+      <svg class="icon" aria-hidden="true">
+          <use :xlink:href="'#' + detailsData.countryIcon"></use>
+      </svg>
+      <!-- <i :class="'iconfont ' + detailsData.countryIcon" style="margin-right: 10px"></i> -->
+      <span style="margin-left:5px;">
         {{ detailsData.countryName }} , {{ detailsData.provinceName }} , {{ detailsData.cityName }}
         <span v-show="detailsData.address"> , {{ detailsData.address }}</span>
       </span>

src/views/dataBoard/board/salesAnalysis/index.vue

@@ -90,6 +90,18 @@
             :hidePagination="true"
             :selectConfig="[]"
           >
+          <template #flag="{ item }">
+          <div>
+            <div>
+              <svg class="icon" aria-hidden="true">
+                  <use :xlink:href="'#' + item.countryIcon"></use>
+              </svg>
+              
+              {{ item.countryName }}
+            </div>
+            
+          </div>
+        </template>
           </byTable>
         </el-col>
       </el-row>
@@ -350,8 +362,8 @@ const scatterConfig = computed(() => {
     },
     {
       attrs: {
-        label: "国家",
-        prop: "countryName",
+        label: "国旗",
+        slot: "flag",
       },
     },
     {