vue2项目el-table中嵌套el-dropdown, 下拉菜单事件不响应_el-dropdown 点击下拉没反应

最近在做项目改造，发现之前element-plus中正常使用el-dropdown，在element中没响应，查了官方文档了解到两个版本dropdown的事件不一样

下面分别看一下两个版本的写法

// Vue3里element-plus写法
 
<el-dropdown class="dropdown">
     <el-button type="primary" text>
         更多<el-icon><ArrowDown/></el-icon>
     </el-button>
  <template #dropdown>
     <el-dropdown-menu>
         <el-dropdown-item @click="deleteById(scope)">删除</el-dropdown-item>
         <el-dropdown-item @click="showRelease(scope)">发布</el-dropdown-item>
         <el-dropdown-item @click="cancel(scope)" disabled>撤销</el-dropdown-item>
     </el-dropdown-menu>
   </template>
</el-dropdown>
 
<script setup>
//js部分
const deleteById = (row) =>{
    console.log(row)
}
</script>

// Vue2中element写法，官方示例
<el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="a">黄金糕</el-dropdown-item>
    <el-dropdown-item command="b">狮子头</el-dropdown-item>
    <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
    <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
    <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
 
<script>
  export default {
    methods: {
      handleCommand(command) {
        this.$message('click on item ' + command);
      }
    }
  }
</script>

 在element中，使用common事件感觉有点绕弯子，所以我用了.native 修饰符的方式实现了下拉菜单的事件触发。

.native - 监听组件根元素的原生事件。
主要是给自定义的组件添加原生事件。

<el-dropdown class="dropdown">
    <el-button type="text">
        更多<i class="el-icon-arrow-down"></i>
    </el-button>
    <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="deleteById(scope.row)">删除</el-dropdown-item>
        <el-dropdown-item @click.native="showRelease(scope.row)">发布</el-dropdown-item>
        <el-dropdown-item @click.native="cancel(scope.row)" disabled>撤销</el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>
 
<script>
//js事件就可以正常写啦
export default {
    methods:{
        deleteById(row){
            console.log(row)
        }
    }
}
</script>

喜欢的点个关注吧