vue+element下拉框样式的点击按钮

项目中点击按钮实在太多了,怎么办呢?我们就可以将它们制作成像下拉框那样的类似操作

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 }