element el-dropdown使用下拉菜单实现查看更多的效果

敲代码无敌小奶龙

已于 2023-05-12 08:48:12 修改

阅读量1.2k

点赞数 1

分类专栏： elementUI 文章标签： vue.js elementui javascript

于 2023-02-01 15:07:58 首次发布

本文链接：https://blog.csdn.net/qq_53986004/article/details/128833588

版权

elementUI 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何利用ElementUI的el-dropdown组件创建一个具有‘更多’选项的下拉菜单，菜单中包含查看表结构和新增功能的按钮，通过点击事件处理函数实现具体操作。示例代码展示了如何配置el-dropdown及其子组件el-dropdown-item和el-button来达成这一效果。

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

2023.2.1今天我学习了如何使用el-dropdown下拉菜单组件来实现查看更多的效果。

效果：

js代码如下：

<!--下拉菜单实现更多的效果-->
          <el-dropdown>
            <span class="el-dropdown-link">
                <i class="el-icon-d-arrow-right el-icon&#45;&#45;right">更多</i>
            </span>

            <!--存放在更多里面的按钮方法-->
            <el-dropdown-menu slot="dropdown" style="width: 100px;text-align: center">

              <!--@click="editDB(scope.row)"查看表结构的方法-->
            <el-dropdown-item>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                style="color: green"
                @click="xxx1(scope.row)"
              >xxxx1
              </el-button>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-plus"
                @click="xxx2(scope.row)"
              >xxxx2
              </el-button>
              <br>
            </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

仿造与element UI组件：

Element - The world's most popular Vue UI framework