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 }