多数据视图快速分组组件 --fix2

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

@@ -30,8 +30,6 @@
         .app-seleted-item {
             height: 40px;
             height: 40px;
-            color: red;
-            border-bottom: 2px solid red;
         }
 	}
 }

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

 <template>
   <div class="app-quick-group">
-    <div
-      class="quick-group-tab"
-      v-for="item in showItems"
-      :key="item.id"
-      @click="handleClick(item)"
-    >
+    <div class="quick-group-tab" v-for="(item,index) in showItems" :key="index">
       <div
         v-if="!item.children"
         :style="{color:item.color}"
         :class="{'app-seleted-item':isSelectedItem(item)}"
+        @click="handleClick(item)"
       >
         <ion-icon v-if=" item.iconcls && !Object.is(item.iconcls, '')" :name="item.iconcls"></ion-icon>
         <img v-else-if="item.icon && !Object.is(item.icon, '')" :src="item.icon" />
@@ -18,9 +14,17 @@
 
       <div class="parentGroup" v-if="item.children">
         <span>{{item.label}}</span>
-        <ion-select class="app-quick-item-dropdown" interface="popover" selected-text=" " @ionChange="handleCommand($event,item)">
-          <ion-select-option v-for="childitem in item.children" :key="childitem.id">
-            <ion-icon v-if=" childitem.iconcls && !Object.is(childitem.iconcls, '')" :name="childitem.iconcls"></ion-icon>
+        <ion-select
+          class="app-quick-item-dropdown"
+          interface="popover"
+          selected-text=" "
+          @ionChange="handleCommand($event,item)"
+        >
+          <ion-select-option v-for="(childitem,index) in item.children" :key="index">
+            <ion-icon
+              v-if=" childitem.iconcls && !Object.is(childitem.iconcls, '')"
+              :name="childitem.iconcls"
+            ></ion-icon>
             <img v-else-if="childitem.icon && !Object.is(childitem.icon, '')" :src="childitem.icon" />
             <span class="app-quick-item-label">{{childitem.label}}</span>
           </ion-select-option>
@@ -43,6 +47,8 @@ import {
   components: {},
 })
 export default class AppQuickGroupTab extends Vue {
+  public test($event: any) {}
+
   /**
    * 快速分组代码表
    *
@@ -156,6 +162,7 @@ export default class AppQuickGroupTab extends Vue {
     if (isswitch) {
       this.selectedUiItem = $event;
     }
+    console.log($event);
     this.$emit("valuechange", $event);
     this.$forceUpdate();
   }
@@ -168,11 +175,11 @@ export default class AppQuickGroupTab extends Vue {
    * @memberof AppQuickGroup
    */
   public handleCommand($event: any, item: any): void {
-    item.children.forEach((child:any) => {
-        if (child.text === $event.detail.value) {
-            this.handleClick($event.detail.value, false);
-        }
-    })
+    item.children.forEach((child: any) => {
+      if (child.text === $event.detail.value) {
+        this.handleClick(child, true);
+      }
+    });
   }
 }
 </script>