前端icon细节优化

web/src/view/superAdmin/menu/icon.vue

@@ -9,16 +9,15 @@
       label-position="top"
     >
       <el-form-item prop="icon" style="width:100%">
-                <i class="icon" :class="'el-icon-'+ value" style="position: absolute; z-index: 9999; padding: 5px 1px; "></i>
-                <el-select v-model="value" placeholder="请选择"  @change="propIcon(value)">
-                    <el-option
-                            v-for="item in options"
-                            :key="item.key"
-                            :label="item.label"
-                            :value="item.key"
-                    >
+        <i
+          class="icon"
+          :class="'el-icon-'+ meta.icon"
+          style="position: absolute; z-index: 9999; padding: 5px 10px; "
+        ></i>
+        <el-select clearable filterable class="gva-select" v-model="meta.icon" placeholder="请选择" @change="propIcon(value)">
+          <el-option v-for="item in options" :key="item.key" :label="item.key" :value="item.key">
             <span class="icon" :class="item.label"></span>
-                        <span style="float: left">{{ item.label }}</span>
+            <span style="float: left">{{ item.key }}</span>
           </el-option>
         </el-select>
       </el-form-item>
@@ -31,7 +30,7 @@
   name: "icon",
   data() {
     return {
-              input:'',
+      input: "",
       options: [
         { key: "platform-eleme", label: "el-icon-platform-eleme" },
         { key: "eleme", label: "el-icon-eleme" },
@@ -71,7 +70,10 @@
         { key: "close", label: "el-icon-close" },
         { key: "picture", label: "el-icon-picture" },
         { key: "picture-outline", label: "el-icon-picture-outline" },
-                  { key: "picture-outline-round", label: "el-icon-picture-outline-round" },
+        {
+          key: "picture-outline-round",
+          label: "el-icon-picture-outline-round"
+        },
         { key: "upload", label: "el-icon-upload" },
         { key: "upload2", label: "el-icon-upload2" },
         { key: "download", label: "el-icon-download" },
@@ -313,26 +315,22 @@
         { key: "ice-cream-square", label: "el-icon-ice-cream-square" },
         { key: "ice-cream-round", label: "el-icon-ice-cream-round" }
       ],
-              value: ''
-          }
+      value: ""
+    };
   },
   props: {
-            icon:{
+    meta: {
       default: function() {
-                        return {}
+        return {};
       },
       type: Object
-            },
-        },
-        created() {
-            this.value = this.icon.icon
-        },
-        methods:{
-        }
     }
+  },
+  methods: {}
+};
 </script>
 
-<style scoped>
+<style lang="scss">
 .icon {
   float: left;
   color: rgb(132, 146, 166);
@@ -340,4 +338,7 @@
   line-height: 34px;
   margin-right: 10px;
 }
+.gva-select .el-input__inner {
+    padding:0 30px !important
+}
 </style>

web/src/view/superAdmin/menu/menu.vue

@@ -23,7 +23,7 @@
       </el-table-column>
       <el-table-column label="图标" min-width="140" prop="authorityName">
         <template slot-scope="scope">
-          <i :class="`icon el-icon-${scope.row.meta.icon}`"></i>
+          <i :class="`el-icon-${scope.row.meta.icon}`"></i>
           <span>{{scope.row.meta.icon}}</span>
         </template>
       </el-table-column>