食物和食谱列表操作按钮合并

src/views/food/index.vue

@@ -107,23 +107,20 @@
           <span>{{ row.updateTime }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding" fixed="right" width="460">
+      <el-table-column label="操作" align="center" class-name="small-padding" fixed="right" width="90">
         <template slot-scope="{row,$index}">
-          <el-button type="primary" size="mini" @click="handleUpdate(row)">
-            更新
-          </el-button>
-          <el-button type="primary" size="mini" @click="manageNutrients(row)">
-            营养素关联
-          </el-button>
-          <el-button type="primary" size="mini" @click="manageUnits(row)">
-            单位管理
-          </el-button>
-          <el-button type="primary" size="mini" @click="manageModifiers(row)">
-            规格管理
-          </el-button>
-          <el-button size="mini" type="danger" @click="handleDelete(row, $index)">
-            删除
-          </el-button>
+          <el-dropdown @command="handleCommand">
+            <el-button size="small" @click.stop="{}" type="primary">
+              操作<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item :command="{row: row, command: 'update'}">更新</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'manageNutrients'}">营养素关联</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'manageUnits'}">单位管理</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'manageModifiers'}">规格管理</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'delete'}">删除</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
         </template>
       </el-table-column>
     </el-table>
@@ -257,6 +254,25 @@ export default {
       let fromData = new FormData()
       fromData.append('file', file.raw)
       this.uploadFile = fromData
+    },
+    handleCommand(data) {
+      switch (data.command) {
+        case 'update':
+          this.handleUpdate(data.row)
+          break
+        case 'manageNutrients':
+          this.manageNutrients(data.row)
+          break
+        case 'manageUnits':
+          this.manageUnits(data.row)
+          break
+        case 'manageModifiers':
+          this.manageModifiers(data.row)
+          break
+        case 'delete':
+          this.handleDelete(data.row)
+          break
+      }
     }
   }
 }

src/views/recipe/index.vue

@@ -63,20 +63,19 @@
           <span>{{ row.updateTime }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding" fixed="right" width="360">
+      <el-table-column label="操作" align="center" class-name="small-padding" fixed="right" width="90">
         <template slot-scope="{row,$index}">
-          <el-button type="primary" size="mini" @click="handleCreateOrUpdate('edit', row)">
-            更新
-          </el-button>
-          <el-button type="primary" size="mini" @click="manageSteps(row)">
-            管理步骤
-          </el-button>
-          <el-button type="primary" size="mini" @click="manageFoods(row)">
-            管理食物
-          </el-button>
-          <el-button size="mini" type="danger" @click="handleDelete(row, $index)">
-            删除
-          </el-button>
+          <el-dropdown @command="handleCommand">
+            <el-button size="small" @click.stop="{}" type="primary">
+              操作<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item :command="{row: row, command: 'update'}">更新</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'manageSteps'}">管理步骤</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'manageFoods'}">管理食物</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'delete'}">删除</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
         </template>
       </el-table-column>
     </el-table>
@@ -206,6 +205,22 @@ export default {
       }).catch(res => {
         this.$message.error(res.data.message)
       })
+    },
+    handleCommand(data) {
+      switch (data.command) {
+        case 'update':
+          this.handleCreateOrUpdate('edit', data.row)
+          break
+        case 'manageSteps':
+          this.manageSteps(data.row)
+          break
+        case 'manageFoods':
+          this.manageFoods(data.row)
+          break
+        case 'delete':
+          this.handleDelete(data.row)
+          break
+      }
     }
   }
 }