vue中 el-dropdown组件使用

效果图:
在这里插入图片描述

代码:
注:我们可以v-hasPermi权限控制菜单是否需要显示

<el-dropdown @command="(command)=>{handleCommand(command)}">
  <el-button type="primary" size="mini" >更多操作<i class="el-icon-arrow-down el-icon--right"></i></el-button>
	<el-dropdown-menu slot="dropdown" >
	 <el-dropdown-item  command="1" v-hasPermi="['propertyRight:receiptBill:withdraw']">撤回</el-dropdown-item>
	 <el-dropdown-item  command="2" v-hasPermi="['propertyRight:receiptBill:frozen']">冻结</el-dropdown-item>
	 <el-dropdown-item  command="3" v-hasPermi="['propertyRight:receiptBill:thaw']">解冻</el-dropdown-item>
	 <el-dropdown-item  command="4" v-hasPermi="['propertyRight:receiptBill:import']">导入</el-dropdown-item>
	 <el-dropdown-item  command="5" v-hasPermi="['propertyRight:receiptBill:export']">导出</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>	

//更多操作
//switch实现调用对应的业务逻辑处理
	handleCommand(command){
		switch(command){
					case "1":
						this.handleWithdraw();//业务逻辑处理方法
						break;
					case "2":
						this.handleFrozen();
						break;
					case "3":
						this.handleThaw();
						break;
					case "4":
						this.handleImport();
						break;	
					case "5":
						this.handleExport();
						break;	
		}
},


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值