vue中 el-dropdown组件使用

效果图:
vue中 el-dropdown组件使用_第1张图片

代码:
注:我们可以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;	
		}
},


你可能感兴趣的:(开发遇到的坑,vue.js,前端,elementui)