vue——基于element的tabs里的下拉菜单

最新推荐文章于 2025-04-16 14:48:59 发布

weixin_58412143

最新推荐文章于 2025-04-16 14:48:59 发布

阅读量1.4k

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/weixin_58412143/article/details/125892725

版权

本文详细介绍了如何在基于Vue.js的Element UI组件库中，为Tabs组件添加下拉菜单功能。通过结合使用Vue的指令和Element UI的组件，实现了在Tab头部分展示下拉菜单，提供了更丰富的交互体验。下拉菜单的内容可以根据需求动态加载，同时也支持选中状态的管理，确保了功能的完整性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<div class="tips">
			<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
				<el-tab-pane label="排序方式" name="three" :disabled="true" style="color: #2C3E50;"></el-tab-pane>
				<el-tab-pane label="销量" name="first"></el-tab-pane>
				<el-tab-pane name="second" :disabled="true">
					<span slot="label">
						<el-dropdown>
							<span class="el-dropdown-link">
								{{title}}<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item @click.native="getQuest">由高到低</el-dropdown-item>
								<el-dropdown-item @click.native="getQuest2">由低到高</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</span>
				</el-tab-pane>
			</el-tabs>
		</div>

				activeName: 'first', //tab

orderBy: [],
				title: "价格"
	//tab
			handleClick(tab, event) {
				if (tab.name == 'second') {

				} else if (tab.name == 'first') {
					this.orderBy = []
//要传给后台的排序数组
					this.orderBy.push('sales', 'desc')
//后台接口调用
					this.getTopList()
				}
			},
			//由高到低
			getQuest() {
				this.activeName='second'
				this.title='价格由高到低'
				this.orderBy = []
				this.orderBy.push('price', 'desc')
				this.getTopList()
			},
			getQuest2() {
				this.activeName='second'
				this.title='价格由低到高'
				this.orderBy = []
				this.orderBy.push('price', 'asc')
				this.getTopList()
			},