怎么获取到el-menu-item点击行的某个字段
时间: 2023-12-16 21:05:19 浏览: 73
如果你是在使用 Element UI 的 el-menu 组件,可以通过监听 menu-item 的 click 事件,在事件回调函数中获取到当前点击的菜单项对应的数据。
例如,如果你的菜单项数据是一个数组,每个菜单项都有一个唯一的 id 字段,你可以这样获取到点击菜单项的 id:
```html
<template>
<el-menu @select="handleMenuSelect">
<el-menu-item v-for="item in menuList" :key="item.id" :index="item.id">{{ item.name }}</el-menu-item>
</el-menu>
</template>
<script>
export default {
data() {
return {
menuList: [
{ id: 1, name: '菜单项1' },
{ id: 2, name: '菜单项2' },
{ id: 3, name: '菜单项3' }
]
}
},
methods: {
handleMenuSelect(index) {
// 根据菜单项的 index 获取到对应的 id
const id = parseInt(index)
console.log('点击了菜单项,id为:', id)
}
}
}
</script>
```
在上面的例子中,我们监听了 el-menu 组件的 select 事件,并将事件回调函数绑定到 handleMenuSelect 方法上。在方法内部,我们可以通过参数 index 获取到当前点击的菜单项的索引值,然后将其转换成对应的 id 值。最后,我们就可以在控制台打印出点击的菜单项的 id 了。