vue element在动态菜单中 双击某一个菜单 在双击的菜单旁边 出现一个 编辑的选择框
时间: 2024-02-23 20:01:29 浏览: 61
vue+Element中table表格实现可编辑(select下拉框)
您可以通过在菜单项中添加一个 `el-input` 组件,并使用 `v-if` 指令来控制它的显示和隐藏。在双击菜单项时,您可以将该菜单项的状态标记为“编辑”,并在状态为“编辑”时显示输入框。以下是一个示例代码:
```
<template>
<div>
<el-menu>
<el-menu-item v-for="item in menuItems" :key="item.id">
<div @dblclick="editItem(item)">
{{ item.text }}
<el-input v-if="item.editing" v-model="item.text" @blur="saveItem(item)" />
</div>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
menuItems: [
{ id: 1, text: '菜单项1', editing: false },
{ id: 2, text: '菜单项2', editing: false },
{ id: 3, text: '菜单项3', editing: false }
]
}
},
methods: {
editItem(item) {
item.editing = true
},
saveItem(item) {
item.editing = false
}
}
}
</script>
```
在上面的示例中,当双击菜单项时,`editItem` 方法会将该菜单项的 `editing` 属性设置为 `true`。此时,由于 `v-if="item.editing"` 的存在,该菜单项的输入框会显示出来。当输入框失去焦点或按下 Enter 键时,`saveItem` 方法会将 `editing` 属性设置为 `false`,此时输入框会消失。
阅读全文