zpc --- 调整快速分组栏

src/components/app-quick-group/app-quick-group.less

 .app-quick-group{
+    padding: 4px;
+    background-color: #F1F1F1;
     .app-quick-item{
-        margin-right: 4px;
+        margin-right: 8px;
+        padding: 8px;
         cursor: pointer;
+        .app-quick-item-label{
+            margin-left:4px;
+        }
+        .app-seleted-item{
+            display: inline-block;
+            font-weight: 700;
+            color: #0c64eb !important;
+            padding: 4px;
+            border-bottom: 2px solid;
+        }
+        .app-seleted-item:focus {
+            outline: none;
+        }
+        .app-quick-item-counter{
+            border-radius: 12px;
+            padding-left: 4px;
+            font-size: 12px;
+            font-weight: 400;
+            vertical-align: middle;
+            display: inline-block;
+            width: 18px;
+            height: 18px;
+            margin-left: 4px;
+            background-color: #ddd;
+        }
+    }
+    .app-quick-item :hover{
+        color: #0c64eb !important;
     }
 }
\ No newline at end of file

src/components/app-quick-group/app-quick-group.vue

 <template>
   <div class="app-quick-group">
     <span class="app-quick-item" v-for="item in renderArray" :key="item.id" @click="handleClick(item)">
-      <el-tag :type="selectedUiItem.id === item.id?'':'info'" v-if="!item.children">
-        <span :style="{color:item.color}">
+      <span v-if="!item.children" :style="{color:item.color}" :class="{'app-seleted-item':isSelectedItem(item)}">
+        <i v-if=" item.iconcls && !Object.is(item.iconcls, '')" :class="item.iconcls"></i>
+        <img v-else-if="item.icon && !Object.is(item.icon, '')" :src="item.icon" />
+        <span class="app-quick-item-label">{{item.label}}</span>
+        <span v-show="isSelectedItem(item)" class="app-quick-item-counter">0</span>
+      </span>
+      <el-dropdown v-if="item.children" style="outline: none !important;" trigger="click" @command="handleCommand($event,item)">
+        <span :style="{color:item.color}" :class="{'app-seleted-item':isSelectedItem(item)}">
           <i v-if=" item.iconcls && !Object.is(item.iconcls, '')" :class="item.iconcls"></i>
           <img v-else-if="item.icon && !Object.is(item.icon, '')" :src="item.icon" />
-          <el-badge v-if="counterName" :value="''" class="item" type="primary">{{item.label}}</el-badge>
-          <span v-else>{{item.label}}</span>
+          <span class="app-quick-item-label">{{item.label}}</span>
+          <span v-show="isSelectedItem(item)" class="app-quick-item-counter">0</span>
         </span>
-      </el-tag>
-      <el-dropdown v-if="item.children" @command="handleCommand($event,item)">
-        <el-tag :type="selectedUiItem.id === item.id?'':'info'">
-          <span :style="{color:item.color}">
-            <i v-if=" item.iconcls && !Object.is(item.iconcls, '')" :class="item.iconcls"></i>
-            <img v-else-if="item.icon && !Object.is(item.icon, '')" :src="item.icon" />
-            <el-badge v-if="counterName" :value="''" class="item" type="primary">{{item.label}}</el-badge>
-            <span v-else>{{item.label}}</span>
-          </span>
-        </el-tag>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item v-for="childitem in item.children" :command="childitem" :key="childitem.id">
             <span :style="{color:childitem.color}">
               <i v-if=" childitem.iconcls && !Object.is(childitem.iconcls, '')" :class="childitem.iconcls"></i>
               <img v-else-if="childitem.icon && !Object.is(childitem.icon, '')" :src="childitem.icon" />
-              {{childitem.label}}
+              <span :style="{color:(childitem.label == item.label)?'#0c64eb':''}">{{childitem.label}}</span>
             </span>
           </el-dropdown-item>
         </el-dropdown-menu>
@@ -93,6 +89,20 @@ export default class AppQuickGroup extends Vue {
         return [];
       }
     }
+
+    /**
+     * 是否选中当前项
+     * 
+     * @param item 传入当前项
+     * @memberof AppQuickGroup
+     */
+    public isSelectedItem(item:any){
+      if(this.selectedUiItem && (this.selectedUiItem.id === item.id)){
+        return true;
+      }else{
+        return false;
+      }
+    }
  
     /**
      * 处理代码表返回数据(树状结构)