vue3中element-plus下拉菜单与图标的使用

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio

演示地址:RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/

更多nbcio-boot功能请看演示系统

gitee源代码地址

后端代码: https://gitee.com/nbacheng/nbcio-boot

前端代码:https://gitee.com/nbacheng/nbcio-vue.git

在线演示(包括H5) : http://218.75.87.38:9888

1、el-dropdown和el-dropdown-menu的使用

这个要注意,跟原先vue2版本的不一样了,所以需要根据新的vue3做调整

类似官方的提供的

javascript 复制代码
<el-dropdown>
    <span class="el-dropdown-link">
      Dropdown List
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>Action 1</el-dropdown-item>
        <el-dropdown-item>Action 2</el-dropdown-item>
        <el-dropdown-item>Action 3</el-dropdown-item>
        <el-dropdown-item disabled>Action 4</el-dropdown-item>
        <el-dropdown-item divided>Action 5</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

样式如下:

2、图标的使用,因为element-plus的与原先vue2也有区别,所以需要根据官方的来

可以根据官方的icon来拷贝它的代码

如:<el-icon><CopyDocument /></el-icon> ,当然可以在el-dropdown-item或el-button里用icon属性来赋值,比如下面的实际例子使用的方式

3、具体的一个例子代码如下:

javascript 复制代码
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-dropdown>
              <span class="el-dropdown-link">
                更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item icon="el-icon-edit" @click.native="handleLoadXml(scope.row)">
                    编辑
                  </el-dropdown-item>
                 <el-dropdown-item icon="el-icon-edit" @click.native="handleAddForm(scope.row)" 
                   v-if="scope.row.formId == null && scope.row.appType == 'OA'">
                  配置表单
                 </el-dropdown-item>
                 <el-dropdown-item icon="el-icon-edit" @click.native="handleAddOnlineForm(scope.row)"
                   v-if="scope.row.formId == null && (scope.row.appType == 'ONLINE')">
                  配置online表单
                 </el-dropdown-item>
                 <el-dropdown-item icon="CopyDocument" @click.native="SubmitApplication(scope.row)" 
                   v-if="(scope.row.formId != null && scope.row.appType == 'OA' )   
                    || (scope.row.formId != null && scope.row.appType == 'ONLINE')">
                  发起申请
                 </el-dropdown-item>
                  <el-dropdown-item icon="VideoPause" @click.native="handleUpdateSuspensionState(scope.row)"
                    v-if="scope.row.suspensionState === 1">
                    挂起
                  </el-dropdown-item>
                  <el-dropdown-item icon="VideoPlay" @click.native="handleUpdateSuspensionState(scope.row)"
                    v-if="scope.row.suspensionState === 2">
                    激活
                  </el-dropdown-item>
                  <el-dropdown-item icon="el-icon-delete" @click.native="handleDelete(scope.row)">
                    删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>

4、效果图如下:

相关推荐
Mintopia3 分钟前
计算机图形学进阶探索与实践
前端·javascript·计算机图形学
代码小学僧5 分钟前
团队协作必备!pnpm 版本管理与 corepack 使用指南
前端·node.js·团队管理
一天睡25小时5 分钟前
前端工程化&&Webpack 和 Vite 的区别
前端·前端框架
gxn_mmf6 分钟前
页面需要重加载才能显示的问题修改
前端·bug
北京_宏哥7 分钟前
🔥Jmeter(二十五) - 从入门到精通 - JMeter函数 - 下篇(详解教程)
前端·jmeter·面试
天生我材必有用_吴用8 分钟前
鸿蒙开发入门到进阶:从布局基础到组件实战
前端·harmonyos·arkts
zhangxiao9 分钟前
自定义指令 - 去除所有空格和换行
前端
三思而后行,慎承诺10 分钟前
详解React Fiber架构中,reconcile阶段的具体工作流程
javascript·react.js·ecmascript
前端太佬11 分钟前
微信公众号网页登录:前端视角下的技术实现精要
前端·javascript·微信