【el-dropdown】具体写法

最新推荐文章于 2024-08-06 15:24:17 发布

火炉本炉

最新推荐文章于 2024-08-06 15:24:17 发布

阅读量796

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_45567679/article/details/121784511

版权

本文介绍了如何使用Element UI创建一个带有迷你按钮的下拉菜单，展示了如何通过`v-auth`权限控制实现重置密码和分配角色的功能。通过`handleCommand`方法，用户可以轻松执行不同操作，如重置密码和管理用户角色。

摘要由CSDN通过智能技术生成

页面效果

在这里插入图片描述

	<el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">
         <span class="el-dropdown-link">
             el-button size="mini" type="text" icon="el-icon-d-arrow-right el-icon--right">更多</el-button>
         </span>
         <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-auth="'system:user:resetPwd'" command="handleResetPwd" icon="el-icon-key">重置密码</el-dropdown-item>
            <el-dropdown-item v-auth="'system:user:role'" command="handleAuthRole" icon="el-icon-circle-check">分配角色</el-dropdown-item>
         </el-dropdown-menu>
  	</el-dropdown>

    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case 'handleResetPwd':
          this.handleResetPwd(row)
          break
        case 'handleAuthRole':
          this.handleAuthRole(row)
          break
        default:
          break
      }
    },

    /** 重置密码按钮操作 */
    handleResetPwd(row) {
      this.resetPwdOpen = true
      const userId = row.userId
      this.pwdform.userId = userId
    },