分类下拉组件

components/common/u-dropdown-select/index.vue

@@ -6,7 +6,7 @@
 		</view>
 		<view v-if="showOptions" class="u-dropdown-select-mask" :style="{ 'top': offsetTop +'px' }" @click="showOptions = false"></view>
 		<view v-if="showOptions" class="u-dropdown-panel" :style="{ 'top': offsetTop +'px' }">
-			<view class="u-dropdown-tabs">
+			<view v-if="tabs.length" class="u-dropdown-tabs">
 				<u-tabs :active.sync="tabActive" :tabs="tabs" tab-style="tag" @change="tabChange"/>
 			</view>
 			<view class="u-dropdown-options">
@@ -126,7 +126,7 @@
 					if (option.tab) {
 						this.label = option.tab.label + ' / ' + option.item.label
 					} else {
-						this.label = option.item.label
+						this.label = option.label
 					}
 				} else {
 					this.label = ''
@@ -183,6 +183,13 @@
 				}
 			},
 			cleanListActive() {
+				if (this.tabs && this.tabs.length) {
+					for (const tab of this.tabs) {
+						tab.children.forEach(item => {
+							this.$set(item, 'active', false)
+						})
+					}
+				}
 				this.list.forEach(item => {
 					this.$set(item, 'active', false)
 				})

pages/exhibitor/index.vue

@@ -6,7 +6,7 @@
 				<view class="exhibitor-filter">
 					<view>
 						<view class="exhibitor-filter-label">展馆号</view>
-						<u-dropdown-select ref="select1" v-model="categoryId" placeholder="选择展馆号" :options="categories" @dropdown="onSelectDropdown(1)" /> 
+						<u-dropdown-select ref="select1" v-model="categoryId" placeholder="选择展馆号" :options="categories2" @dropdown="onSelectDropdown(1)" /> 
 					</view>
 					<view>
 						<view class="exhibitor-filter-label">产品类别</view>
@@ -55,6 +55,25 @@
 				categoryId: undefined,
 				searchKeyword: '',
 				exhibitorList: [{ favourited: true, name: '科世达（上海）连接器有限公司' }, { liked: true }, { voted: true }, {}, {}, {}],
+				categories2: [{
+						label: '表面贴装技术',
+						value: 11
+					}, {
+						label: 'PCB焊接和连接技术',
+						value: 12
+					}, {
+						label: '测试测量和质量保证',
+						value: 13
+					}, {
+						label: '电子组装自动化',
+						value: 14
+					}, {
+						label: '生产物流和物流技术',
+						value: 15
+					}, {
+						label: '清洗技术',
+						value: 16
+					}],
 				categories: [{
 					label: '表面贴装',
 					value: 1,
@@ -79,7 +98,11 @@
 					}]
 				}, {
 					label: '线束加工',
-					value: 2
+					value: 2,
+					children: [{
+						label: '表面贴装技术',
+						value: 111
+					}]
 				}, {
 					label: '工厂自动化',
 					value: 3