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

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

@@ -15,28 +15,39 @@
 		align-items: center;
 		border: 1px solid #a8a8a8;
 		margin: 0 0 -1px -1px;
-		.parentGroup {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			.app-quick-item-dropdown {
-				--padding-start: 0;
-				--padding-end: 0;
-			}
-			ion-select::part(text) {
-				min-width: 0;
-			}
-			ion-select::part(icon) {
-				position: unset;
-				margin-right: 2px;
-			}
-		}
 	}
 	.app-seleted-item {
 		background-color: #a8a8a8;
 		color: white;
 	}
 }
+.child-list {
+	position: absolute;
+	left: 0;
+	right: 0;
+	width: 90%;
+	max-height: 400px;
+	margin: auto;
+	background-color: white;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: flex-start;
+	z-index: 9999;
+	overflow: hidden;
+	overflow-y: auto;
+	border-bottom: 1px solid #a8a8a8;
+	border-bottom-left-radius: 10px;
+	border-bottom-right-radius: 10px;
+	box-shadow: 0 0 10px #8e9eab;
+	.child {
+		width: 100%;
+		padding: 10px 20px;
+		border-bottom: 1px solid #a8a8a8;
+		display: flex;
+		align-items: center;
+	}
+}
 .app-quick-group > .quick-group-tab:first-child {
 	border-top-left-radius: 5px;
 	border-bottom-left-radius: 5px;

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)}" v-for="(item,index) in showItems" :key="index">
       <div
-        v-if="!item.children"
         :style="{color:item.color}"
         @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" />
         <span class="app-quick-item-label">{{item.label}}</span>
+        <ion-icon v-if="item.children" name="caret-down-outline"></ion-icon>
       </div>
-
-      <div class="parentGroup" v-if="item.children">
+    </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)">
+      <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>
-        <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>
-        </ion-select>
-      </div>
+      </span>
+      <ion-icon v-if="item.selected" name="checkbox-outline"></ion-icon>
     </div>
   </div>
+</div>
 </template>
 
 <script lang="ts">
@@ -64,6 +57,14 @@ export default class AppQuickGroupTab extends Vue {
    */
   public showItems: any[] = [];
 
+  /**
+   * 子项列表
+   *
+   * @type {any[]}
+   * @memberof AppQuickGroup
+   */
+  public subItems: any[] = [];
+
   /**
    * 监控代码表变化
    *
@@ -163,23 +164,17 @@ export default class AppQuickGroupTab extends Vue {
     if (isswitch) {
       this.selectedUiItem = $event;
     }
-    this.$emit("valuechange", $event);
-    this.$forceUpdate();
-  }
-
-  /**
-   * 处理子项点击事件
-   *
-   * @param $event 值
-   * @param item 父值
-   * @memberof AppQuickGroup
-   */
-  public handleCommand($event: any, item: any): void {
-    item.children.forEach((child: any) => {
-      if (child.text === $event.detail.value) {
-        this.handleClick(child, true);
+    if ($event.children) {
+      if (this.subItems.length > 0) {
+        this.subItems.length = 0;
+      } else {
+        this.subItems.push(...$event.children);
       }
-    });
+    } else {
+      this.subItems.length = 0;
+      this.$emit("valuechange", $event);
+    }
+    this.$forceUpdate();
   }
 }
 </script>