element ui 部分组件在vue3中失效的问题（el-dropdowm，el-submenu）

最新推荐文章于 2024-10-02 23:52:20 发布

qq_31744201

最新推荐文章于 2024-10-02 23:52:20 发布

阅读量401

点赞数 2

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_31744201/article/details/141074679

版权

在element-ui的官网实例中，都是使用vue2展示的，导致使用vue3时，代码展示效果与官网不一致（直接失效）

暂时遇到的问题

一. 下拉菜单el-dropdowm

<el-dropdown>
  <el-button type="primary">
    更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </el-button>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>黄金糕</el-dropdown-item>
    <el-dropdown-item>狮子头</el-dropdown-item>
    <el-dropdown-item>螺蛳粉</el-dropdown-item>
    <el-dropdown-item>双皮奶</el-dropdown-item>
    <el-dropdown-item>蚵仔煎</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

官网代码如上所示，但是在vue3中直接使用的话，下拉菜单是不会出现的，这需要修改部分代码，如下所示

    <el-dropdown>
        更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
      <template #dropdown>
        <el-dropdown-menu >
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item>双皮奶</el-dropdown-item>
          <el-dropdown-item>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </template>

    </el-dropdown>

slot需要写在template中并且使用#符号，这样下拉菜单才会生效。

二.导航栏el-menu 中el-submenu

在vue3中使用el-submenu会失效，需要修改成el-sub-menu，这里面也有使用slot的地方，也需要修改成#符号才行