gengxin

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

+<template>
+    <div>
+        <el-form
+                :inline="true"
+                :model="form"
+                :rules="rules"
+                label-width="85px"
+                ref="menuForm"
+                label-position="top"
+        >
+            <el-form-item prop="icon" style="width:100%">
+                <!--<el-input autocomplete="off" v-model="form.meta.icon">
+                  <template slot="prepend">el-icon-</template>
+                </el-input>-->
+                <el-select v-model="value" filterable placeholder="请选择">
+                    <el-option
+                            v-for="item in options"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "icon",
+        data(){
+          return {
+              input:'',
+              options: [{
+                  value: 'el-icon-platform-eleme',
+                  label: 'el-icon-platform-eleme'
+              }, {
+                  value: 'el-icon-eleme',
+                  label: 'el-icon-eleme'
+              }, {
+                  value: 'el-icon-delete-solid',
+                  label: 'el-icon-delete-solid'
+              }, {
+                  value: 'el-icon-delete',
+                  label: 'el-icon-delete'
+              }, {
+                  value: 'el-icon-s-tools',
+                  label: 'el-icon-s-tools'
+              }],
+              value: ''
+          }
+        },
+    }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -70,9 +70,11 @@
           <el-input autocomplete="off" v-model="form.meta.title"></el-input>
         </el-form-item>
         <el-form-item label="图标" prop="meta.icon" style="width:30%">
-          <el-input autocomplete="off" v-model="form.meta.icon">
-            <template slot="prepend">el-icon-</template>
-          </el-input>
+          <!--<el-input autocomplete="off" v-model="form.meta.icon">
+
+          </el-input>-->
+          <template slot="prepend">el-icon-</template>
+          <icon></icon>
         </el-form-item>
         <el-form-item label="排序标记" prop="sort" style="width:30%">
           <el-input autocomplete="off" v-model.number="form.sort"></el-input>
@@ -104,6 +106,7 @@ import {
   getBaseMenuById
 } from "@/api/menu";
 import infoList from "@/components/mixins/infoList";
+import icon from '@/view/superAdmin/menu/icon';
 export default {
   name: "Menus",
   mixins: [infoList],
@@ -144,6 +147,9 @@ export default {
       isEdit: false
     };
   },
+  components:{
+    icon
+  },
   methods: {
     setOptions() {
       this.menuOption = [
@@ -305,4 +311,4 @@ export default {
 .warning {
   color: #dc143c;
 }
-</style>
+</style>
\ No newline at end of file