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 }