合并操作按钮

src/views/nutrient/index.vue

@@ -77,26 +77,21 @@
           <span>{{ row.updateTime }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" fixed="right" width="480">
+      <el-table-column label="操作" align="center" fixed="right" width="90">
         <template slot-scope="{row}">
-          <el-button type="primary" size="mini" @click="handleCreateOrUpdate('update', row)">
-            更新
-          </el-button>
-          <el-button type="primary" size="mini" @click="updateSort(row, 0)">
-            上移
-          </el-button>
-          <el-button type="primary" size="mini" @click="updateSort(row, 1)">
-            下移
-          </el-button>
-          <el-button type="primary" size="mini" @click="updateSort(row, 2)">
-            置顶
-          </el-button>
-          <el-button type="primary" size="mini" @click="updateSort(row, 3)">
-            置底
-          </el-button>
-          <el-button size="mini" type="danger" @click="handleDelete(row)">
-            删除
-          </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: 'moveUp'}">上移</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'moveDown'}">下移</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'moveTop'}">置顶</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'moveBottom'}">置顶</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>
@@ -182,7 +177,7 @@ export default {
       listQuery: {
         query: '',
         pageNum: 1,
-        pageSize: 20
+        pageSize: 50
       },
       textMap: {
         update: '更新',
@@ -269,6 +264,28 @@ export default {
         this.$message.error(res.data.message)
         this.fetchData()
       })
+    },
+    handleCommand(data) {
+      switch (data.command) {
+        case 'update':
+          this.handleCreateOrUpdate('update', data.row)
+          break
+        case 'moveUp':
+          this.updateSort(data.row, 0)
+          break
+        case 'moveDown':
+          this.updateSort(data.row, 1)
+          break
+        case 'moveTop':
+          this.updateSort(data.row, 2)
+          break
+        case 'moveBottom':
+          this.updateSort(data.row, 3)
+          break
+        case 'delete':
+          this.handleDelete(data.row)
+          break
+      }
     }
   }
 }

src/views/nutrientTemplate/index.vue

@@ -57,29 +57,22 @@
           <span>{{ row.updateTime }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" fixed="right" width="560">
+      <el-table-column label="操作" align="center" fixed="right" width="90">
         <template slot-scope="{row}">
-          <el-button type="primary" size="mini" :disabled="!canUpdate(row.userId)" @click="handleCreateOrUpdate('update', row)">
-            更新
-          </el-button>
-          <el-button type="primary" size="mini" :disabled="!canUpdate(row.userId)" @click="manageNutrients(row)">
-            管理营养素
-          </el-button>
-          <el-button type="primary" size="mini" :disabled="!canUpdate(row.userId)" @click="updateSort(row, 0)">
-            上移
-          </el-button>
-          <el-button type="primary" size="mini" :disabled="!canUpdate(row.userId)" @click="updateSort(row, 1)">
-            下移
-          </el-button>
-          <el-button type="primary" size="mini" :disabled="!canUpdate(row.userId)" @click="updateSort(row, 2)">
-            置顶
-          </el-button>
-          <el-button type="primary" size="mini" :disabled="!canUpdate(row.userId)" @click="updateSort(row, 3)">
-            置底
-          </el-button>
-          <el-button size="mini" type="danger" :disabled="!canUpdate(row.userId)" @click="handleDelete(row)">
-            删除
-          </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 :disabled="!canUpdate(row.userId)" :command="{row: row, command: 'update'}">更新</el-dropdown-item>
+              <el-dropdown-item :disabled="!canUpdate(row.userId)" :command="{row: row, command: 'manage'}">管理营养素</el-dropdown-item>
+              <el-dropdown-item :disabled="!canUpdate(row.userId)" :command="{row: row, command: 'moveUp'}">上移</el-dropdown-item>
+              <el-dropdown-item :disabled="!canUpdate(row.userId)" :command="{row: row, command: 'moveDown'}">下移</el-dropdown-item>
+              <el-dropdown-item :disabled="!canUpdate(row.userId)" :command="{row: row, command: 'moveTop'}">置顶</el-dropdown-item>
+              <el-dropdown-item :disabled="!canUpdate(row.userId)" :command="{row: row, command: 'moveBottom'}">置顶</el-dropdown-item>
+              <el-dropdown-item :disabled="!canUpdate(row.userId)" :command="{row: row, command: 'delete'}">删除</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
         </template>
       </el-table-column>
     </el-table>
@@ -197,6 +190,31 @@ export default {
     },
     manageNutrients(row) {
       this.$router.push({ path: `nutrient-template/${row.id}/detail` })
+    },
+    handleCommand(data) {
+      switch (data.command) {
+        case 'update':
+          this.handleCreateOrUpdate('update', data.row)
+          break
+        case 'manage':
+          this.manageNutrients(data.row)
+          break
+        case 'moveUp':
+          this.updateSort(data.row, 0)
+          break
+        case 'moveDown':
+          this.updateSort(data.row, 1)
+          break
+        case 'moveTop':
+          this.updateSort(data.row, 2)
+          break
+        case 'moveBottom':
+          this.updateSort(data.row, 3)
+          break
+        case 'delete':
+          this.handleDelete(data.row)
+          break
+      }
     }
   }
 }

src/views/unit/index.vue

@@ -77,23 +77,21 @@
           <span>{{ row.stepScale }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="400">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="90">
         <template slot-scope="{row}">
-          <el-button type="primary" size="mini" @click="handleCreateOrUpdate('UPDATE', row)">
-            更新
-          </el-button>
-          <el-button type="primary" size="mini" @click="updateSort(row, 0)">
-            上移
-          </el-button>
-          <el-button type="primary" size="mini" @click="updateSort(row, 1)">
-            下移
-          </el-button>
-          <el-button type="primary" size="mini" @click="updateSort(row, 2)">
-            置顶
-          </el-button>
-          <el-button type="primary" size="mini" @click="updateSort(row, 3)">
-            置底
-          </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: 'moveUp'}">上移</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'moveDown'}">下移</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'moveTop'}">置顶</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'moveBottom'}">置顶</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>
@@ -230,6 +228,25 @@ export default {
         this.$message.error(res.data.message)
         this.dialogFormVisible = false
       })
+    },
+    handleCommand(data) {
+      switch (data.command) {
+        case 'update':
+          this.handleCreateOrUpdate('update', data.row)
+          break
+        case 'moveUp':
+          this.updateSort(data.row, 0)
+          break
+        case 'moveDown':
+          this.updateSort(data.row, 1)
+          break
+        case 'moveTop':
+          this.updateSort(data.row, 2)
+          break
+        case 'moveBottom':
+          this.updateSort(data.row, 3)
+          break
+      }
     }
   }
 }