avue-crud中将操作栏里自己自定义的按钮合并在一起

avue-crud的操作栏中自带添加，查看，编辑等按钮，我们在开发过程中往往需要自定义按钮，那按钮一多就会影响感官，所以往往会将多余的按钮合并在一个更多按钮，这里我使用的是elementui Dropdown 下拉菜单

  <avue-crud ref="crud" v-model="form" :page.sync="page" :data="tableData" :table-loading="tableLoading"
          :option="tableOption" :permission="permissionList" @search-change="searchChange"
          @refresh-change="refreshChange" @size-change="sizeChange" @current-change="currentChange"
          @row-del="handleDelete" @row-update="update" @row-save="create" :cell-style="cellStyle">

      <template slot="menu" slot-scope="scope">
            <el-button type="text" v-if="permissionList.delBtn" size="small" icon="el-icon-delete"
              @click="handleDelete(scope.row, scope.index)">
              删除
            </el-button>
            <el-dropdown size="mini" @command="handleCommand" placement="bottom">
              <el-button type="text" size="small" class="Morefeatures">更多</el-button>
              <el-dropdown-menu slot="dropdown" v-show="true" class="MoreFeatures_item">
                <el-dropdown-item :command="beforeHandleCommand(scope,'分配管理员')">分配管理员</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>

这里我们需要点击分配管理员时，拿到scope的值，那问题来了，怎么样才能拿到呢，查看官方文档发现， 这里只能拿到command

 <el-dropdown size="mini" @command="handleCommand(scope)" placement="bottom">
              <el-button type="text" size="small" class="Morefeatures">更多</el-button>
              <el-dropdown-menu slot="dropdown" v-show="true" class="MoreFeatures_item">
                <el-dropdown-item :command="beforeHandleCommand(scope,'分配管理员')">分配管理员</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

这样写的话，可以拿到scope的值，但只能传递一个参，我们就不能通过command来判断点击的是哪一个按钮来，虽然我这里只有一个按钮，但功能还是需要考虑全面的。

 beforeHandleCommand(command) {
        return {
          'scope': scope,
          'command': command
        }
      },

这样写我们可以获得一个command的对象，里面存放着scope和command的值

  handleCommand(command) {
        const { scope } = command
        switch (command.command) {
          case "分配管理员":
            this.manageForm = scope.row
            this.isHandleManage = true
            this.selectParams.deptId = scope.row.deptId
            this.$refs.selectUser.showSelectUser()
            break;
        }
      },

无敌