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、效果图如下:

相关推荐
范文杰2 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪2 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪3 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy3 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom4 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom4 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom4 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom4 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom4 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI5 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端