加入mutliselect插件，替换原有element ui select ，解决select v-model绑定obj数据回显问题

Author: BoBoooooo

package.json

@@ -19,6 +19,7 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "vue": "2.5.2",
+    "vue-multiselect": "^2.0.8",
     "vue-router": "2.7.0",
     "vuex": "2.3.1"
   },

src/main.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
+import 'vue-multiselect/dist/vue-multiselect.min.css'
 import locale from 'element-ui/lib/locale/lang/en'
 import App from './App'
 import router from './router'

src/store/getters.js

@@ -6,6 +6,7 @@ const getters = {
   name: state => state.user.name,
   roles: state => state.user.roles,
   permission_routers: state => state.permission.routers,
-  addRouters: state => state.permission.addRouters
+  addRouters: state => state.permission.addRouters,
+  AllRouters:state=>state.permission.AllRouters
 }
 export default getters

src/store/modules/permission.js

@@ -34,12 +34,17 @@ function filterAsyncRouter(asyncRouterMap, roles) {
 const permission = {
   state: {
     routers: constantRouterMap,
-    addRouters: []
+    addRouters: [],
+    AllRouters:[]
   },
   mutations: {
     SET_ROUTERS: (state, routers) => {
       state.addRouters = routers
       state.routers = constantRouterMap.concat(routers)
+    },
+
+    SET_ALLROUTERS: (state) => {
+      state.AllRouters = constantRouterMap.concat(asyncRouterMap)
     }
   },
   actions: {
@@ -53,6 +58,9 @@ const permission = {
           accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
         }
         commit('SET_ROUTERS', accessedRouters)
+
+        commit('SET_ALLROUTERS')
+
         resolve()
       })
     }

src/views/dashboard/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dashboard-container">
     <el-row>
-      <el-col :span="8">
+      <el-col :span="6">
         <el-card :body-style="{ padding: '15px 0px',height:'250px'}">
             <i class="el-icon-edit" style="font-size:30px"></i>
 
@@ -16,12 +16,13 @@
 
         </el-card>
       </el-col>
-      <el-col :span="8" :offset="2">
+      <el-col :span="6" :offset="2">
         <el-card :body-style="{ padding: '15px 0px',height:'250px'}">
                       <i class="el-icon-location" style="font-size:30px"></i>
 
           <div class="dashboard-text" style="padding-top:0px">{{weather.city}}天气</div>
-          <div class="dashboard-text">空气质量:{{weather.data.quality}},气温:{{weather.data.wendu}}℃,湿度:{{weather.data.shidu}}</div>
+          <div class="dashboard-text">空气质量:{{weather.data.quality}}。</div>
+          <div class="dashboard-text">气温:{{weather.data.wendu}}℃，湿度:{{weather.data.shidu}}。</div>
 
         </el-card>
       </el-col>

src/views/layout/Levelbar.vue

@@ -46,4 +46,11 @@ export default {
     cursor: text;
   }
 }
+.app-levelbar.el-breadcrumb :focus{
+  outline:none;
+}
+
+
+
+
 </style>

src/views/layout/Sidebar.vue

@@ -11,8 +11,13 @@ export default {
   components: { SidebarItem },
   computed: {
     ...mapGetters([
-      'permission_routers'
+      'permission_routers',
+      'AllRouters'
     ])
+  },
+  created(){
+   console.log(this.AllRouters) 
+
   }
 }
 </script>

src/views/login/index.vue

@@ -2,7 +2,7 @@
   <div class="login-container">
     <el-form autoComplete="on" :model="loginForm"  ref="loginForm" label-position="left" label-width="0px"
       class="card-box login-form">
-      <h3 class="title"> <img style="width:7%" src='/favicon.ico'> Anshare</h3>
+      <h3 class="title"> <img style="width:7%" src='/logo.ico'> Anshare</h3>
 
 
       <el-form-item prop="username">

src/views/system/users.vue

@@ -81,10 +81,13 @@
         </el-form-item>
 
         <el-form-item label="角色">
-          <el-select v-model="RoleID" placeholder="请选择">
+          <!-- <el-select v-model="RoleID" placeholder="请选择">
             <el-option v-for="item in options" :key="item.ID" :label="item.RoleName" :value="item.ID">
             </el-option>
-          </el-select>
+          </el-select> -->
+          <multiselect :value="RoleID" :options="options" :searchable="false" :close-on-select="true" :allow-empty="false" label="RoleName"
+            placeholder="请选择角色" track-by="RoleName">
+          </multiselect>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -111,10 +114,12 @@
   import {
     GetRoles
   } from "@/api/system/role";
+  import Multiselect from 'vue-multiselect'
 
   export default {
     data() {
       return {
+        RoleID:"",
         depttree: [],
         textMap: {
           update: "编辑",
@@ -139,9 +144,14 @@
         defaultProps: {
           children: "children",
           label: "text"
-        }
+        },
+        selected: null
+
       };
     },
+    components: {
+      Multiselect
+    },
 
     created() {
       this.fetchData();
@@ -199,11 +209,9 @@
 
         GetUsersDetail(ID).then(response => {
 
-          this.dialogStatus = "update";
           this.temp = response.data;
           this.$refs.tree.setCheckedKeys([this.temp.DeptID]);
           this.RoleID = this.temp.RoleID;
-          this.fetchData();
         });
       },