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

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

原创最新推荐文章于 2024-08-13 00:11:49 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

element-ui 专栏收录该内容

4 篇文章

订阅专栏

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

实现类似功能

在这里插入图片描述

关键代码

<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>