修改菜单图标显示

src/views/system/menus/parts/menu-table.vue

@@ -3,7 +3,9 @@
     <el-table :data="data" row-key="id" border>
       <el-table-column align="center" :label="$t('pages.menus.order_num')" sortable prop="order_num" width="80"></el-table-column>
       <el-table-column align="center" :label="$t('pages.menus.icon')" width="80">
-        <template #default="{ row }"><span :class="['iconfont', row.icon]"></span></template>
+        <template #default="{ row }">
+          <component class="icon" :is="row.icon"></component>
+        </template>
       </el-table-column>
       <el-table-column align="center" :label="$t('pages.menus.name')" prop="name"></el-table-column>
       <el-table-column align="center" :label="$t('pages.menus.route_name')" prop="route_name"></el-table-column>
@@ -66,4 +68,14 @@ const getStatus = (row) => {
   return word
 }
 </script>
-<style scoped></style>
+<style scoped>
+.icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  overflow: hidden;
+  vertical-align: -0.15em;
+  outline: none;
+  margin-right: 5px;
+}
+</style>

src/views/system/userMenus/parts/menu-table.vue

@@ -3,7 +3,9 @@
     <el-table :data="data" row-key="id" border>
       <el-table-column align="center" :label="$t('pages.menus.order_num')" sortable prop="order_num" width="80"></el-table-column>
       <el-table-column align="center" :label="$t('pages.menus.icon')" width="80">
-        <template #default="{ row }"><span :class="['iconfont', row.icon]"></span></template>
+        <template #default="{ row }">
+          <component class="icon" :is="row.icon"></component>
+        </template>
       </el-table-column>
       <el-table-column align="center" :label="$t('pages.menus.name')" prop="name"></el-table-column>
       <el-table-column align="center" :label="$t('pages.menus.route_name')" prop="route_name"></el-table-column>
@@ -66,4 +68,14 @@ const getStatus = (row) => {
   return word
 }
 </script>
-<style scoped></style>
+<style scoped>
+.icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  overflow: hidden;
+  vertical-align: -0.15em;
+  outline: none;
+  margin-right: 5px;
+}
+</style>