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

Question

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与二次同时被处罚的情况存在。

Answer 1

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

🔗 这里是问题复现Demo