使用element-ui组件实现下拉菜单显示与折叠，并触发函数

最新推荐文章于 2024-08-13 00:11:49 发布

得得得！

最新推荐文章于 2024-08-13 00:11:49 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： element-ui 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_40950903/article/details/106524539

element-ui 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Element UI的ElTable组件中实现操作列的下拉菜单功能，包括升级、重启和删除等选项，通过ElDropdown组件实现菜单的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现类似功能

在这里插入图片描述

关键代码

<el-table>
    <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
             <el-dropdown size="small">
                  <span style=" font-size: 12px; color: #17B3A3;">
                     更多
                  </span>
                  <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="doUpgrade(scope.row.deviceid)">升级</el-dropdown-item>
                      <el-dropdown-item @click.native="doReboot(scope.row.deviceid)">重启</el-dropdown-item>
                      <el-dropdown-item @click.native="pubScript(scope.row.id)">删除</el-dropdown-item>
                  </el-dropdown-menu>
          </el-dropdown>
        </template>
    </el-table-column>
</el-table>