项目中点击按钮实在太多了,怎么办呢?我们就可以将它们制作成像下拉框那样的类似操作
1.HTML样式部分:关键点在于command 方法和属性
1 <el-dropdown 2 size="small" 3 placement="bottom" 4 trigger="click" 5 @command="batchOperate" 6 style="margin-left: 10px;" 7 > 8 <el-button class="search-btn" size="mini"> 9 其他操作 10 <i class="el-icon-arrow-down el-icon--right"></i> 11 </el-button> 12 <el-dropdown-menu slot="dropdown"> 13 <el-dropdown-item command="batch_remarks" 14 >批量备注</el-dropdown-item 15 > 16 <el-dropdown-item command="export_excel" 17 >本页导出Excel</el-dropdown-item 18 > 19 </el-dropdown-menu> 20 </el-dropdown>
2.Javascript部分:分别设置每个按钮的各自方法
1 methods: { 2 batchOperate(command) { 3 switch (command) { 4 case "batch_remarks": 5 this.dialogRemarks(); 6 break; 7 case "export_excel": 8 this.exportExcel(); 9 break; 10 } 11 }, 12 // 导出本页Excel表 13 exportExcel() { 14 console.log(111) 15 }, 16 dialogRemarks() { 17 console.log(222)
18 }, 19 }