el-dropdown @command 事件触发两次的原因是什么?

作者站长头像
站长
· 阅读数 26

el-dropdown添加command事件,执行了两次,这是为什么?

<el-dropdown trigger="hover" class="user_icon pointer" @command="handleCommand">
    <el-dropdown-menu class="operator-dropdown"  slot="dropdown"> 
        <ul class="operator-item" v-for="(item, index) in operatorList" :key="index">
            <li v-for="(operatItem, idx) in item" :key="idx">
                <el-dropdown-item :command="operatItem.command">
                    <el-dropdown-item :command="operatItem.command">
                            <i :class="operatItem.icon"></i>
                            {{operatItem.name}}
                    </el-dropdown-item>
                </el-dropdown-item>
            </li>
        </ul>
    </el-dropdown-menu>
</el-dropdown>

operatorList: any[] = [
            [
                { name: '修改密码', command: 'editPass', icon: 'el-icon-edit-outline' },
                { name: '后台管理', command: 'setting', icon: 'el-icon-setting' }
            ]
        ]

handleCommand(command) {
// 执行了两次
}

查了别人的类似的两次触发问题,查文档证实,command为官方提供方法,不存在.native与二次同时被处罚的情况存在。

回复
1个回答
avatar
test
2024-06-20

因为你的 el-dropdown-item 里面嵌套了 el-dropdown-item,所以会触发两次,一次是父级的,一次是子级的。所以把外面的 el-dropdown-item 去掉自己写一个 flex 布局的 div 元素就好了。

🔗 这里是问题复现Demo

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容