html
// handleChange鼠标右键才会触发
<div v-for="(item, index) in list" :key="index" @click.right.prevent="handleChange(item)">
// 将trigger设置成manual,去掉默认触发拉下菜单的行为,添加ref
<el-dropdown trigger="manual" :ref="`dropdown${item.id}`">
<div class="tb-dropdown">
<span>{{ item.code }}</span>
</div>
<el-dropdown-menu slot="dropdown" class="lang-select-dropdown">
<el-dropdown-item command="0">黄金糕</el-dropdown-item>
<el-dropdown-item command="1">狮子头</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
javascript
data() {
return {
list: [
{id: 1, code: 1},
{id: 2, code: 2},
]
}
},
methods: {
handleChange(item) {
const name = `dropdown${item.id}`
// 将触发的选择显示;show
this.$refs[name][0].show()
}
}