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