多数据视图快速分组组件样式调整 --fix4

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

@@ -45,8 +45,14 @@
 		padding: 10px 20px;
 		border-bottom: 1px solid #a8a8a8;
 		display: flex;
+		font-size: 13px;
+		color: #a8a8a8;
 		align-items: center;
 	}
+	.selected {
+		color: black;
+		background-color: #b6b6b63d;
+	}
 }
 .app-quick-group > .quick-group-tab:first-child {
 	border-top-left-radius: 5px;

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

@@ -13,14 +13,14 @@
       </div>
     </div>
   </div>
-  <div v-if="subItems.length > 0" class="child-list">
-    <div class="child" v-for="(item,index) in subItems" :key="index" @click="handleClick(item)">
+  <div ref="child-list" v-if="subItems.length > 0" class="child-list">
+    <div :class="{'child':true,'selected':item.selected}" v-for="(item,index) in subItems" :key="index" @click="handleClick(item)">
       <span>
         <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" />
         <span>{{item.label}}</span>
       </span>
-      <ion-icon v-if="item.selected" name="checkbox-outline"></ion-icon>
+      <ion-icon v-if="item.selected" style="margin-left:auto" name="checkbox-outline"></ion-icon>
     </div>
   </div>
 </div>
@@ -172,6 +172,10 @@ export default class AppQuickGroupTab extends Vue {
       }
     } else {
       this.subItems.length = 0;
+      this.items.forEach((item:any) => {
+        item.selected = false;
+      })
+      $event.selected = true;
       this.$emit("valuechange", $event);
     }
     this.$forceUpdate();