多数据视图快速分组组件补充技计数逻辑

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

@@ -7,6 +7,17 @@
 	justify-content: space-around;
 	align-items: center;
 	font-size: 13px;
+	position: relative;
+	.badge {
+		--padding-bottom:0;
+		--padding-end:5px;
+		--padding-start:5px;
+		--padding-top:0;
+		position: relative;
+		top: -5px;
+		left: 5px;
+		background-color: red;
+	}
 	.quick-group-tab {
 		flex: 1;
 		height: 30px;
@@ -48,6 +59,14 @@
 		font-size: 13px;
 		color: #a8a8a8;
 		align-items: center;
+		.badge {
+			--padding-bottom:0;
+			--padding-end:5px;
+			--padding-start:5px;
+			--padding-top:0;
+			margin-left: 10px;
+			background-color: red;
+		}
 	}
 	.selected {
 		color: black;

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

 <template>
 <div>
   <div class="app-quick-group">
-    <div :class="{'quick-group-tab':true,'app-seleted-item':isSelectedItem(item) || item.childSelect}" v-for="(item,index) in showItems" :key="index">
+    <div :class="{'quick-group-tab':true,'app-seleted-item':isSelectedItem(item)}" v-for="(item,index) in showItems" :key="index">
       <div
         :style="{color:item.color}"
         @click="handleClick(item)"
@@ -11,15 +11,17 @@
         <span class="app-quick-item-label">{{item.label}}</span>
         <ion-icon v-if="item.children" name="caret-down-outline"></ion-icon>
       </div>
+      <ion-badge class="badge" v-if="isSelectedItem(item) && pageTotal !== 0 && !item.children">{{pageTotal}}</ion-badge>
     </div>
   </div>
-  <div ref="child-list" v-if="subItems.length > 0" :class="{'child-list':true,}">
+  <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-badge class="badge" v-if="pageTotal !== 0 && item.selected">{{pageTotal}}</ion-badge>
       <ion-icon v-if="item.selected" style="margin-left:auto" name="checkbox-outline"></ion-icon>
     </div>
   </div>
@@ -49,6 +51,14 @@ export default class AppQuickGroupTab extends Vue {
    */
   @Prop({ default: () => [] }) public items!: Array<any>;
 
+    /**
+   * 快速分组代码表
+   *
+   * @type {any[]}
+   * @memberof ViewQuickGroupTab
+   */
+  @Prop({ default:0 }) public pageTotal!: number;
+
   /**
    * 渲染列表
    *
@@ -174,14 +184,8 @@ export default class AppQuickGroupTab extends Vue {
       this.subItems.length = 0;
       this.items.forEach((item:any) => {
         item.selected = false;
-        item.childSelect = false;
       })
       $event.selected = true;
-      this.items.forEach((item:any) => {
-        if (item.id === $event.pvalue) {
-          item.childSelect = true;
-        }
-      })
       this.$emit("valuechange", $event);
     }
     this.$forceUpdate();