vue3后台菜单管理代码
时间: 2023-11-08 11:06:18 浏览: 29
以下是一个简单的基于Vue3的后台菜单管理代码示例:
```
<template>
<div>
<h1>菜单管理</h1>
<div>
<button @click="addMenu">添加菜单</button>
<button @click="deleteMenu">删除菜单</button>
</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>链接</th>
</tr>
</thead>
<tbody>
<tr v-for="menu in menus" :key="menu.id">
<td>{{ menu.id }}</td>
<td>{{ menu.name }}</td>
<td>{{ menu.link }}</td>
</tr>
</tbody>
</table>
<div v-if="selectedMenu">
<h2>编辑菜单</h2>
<form>
<label for="name">名称:</label>
<input type="text" id="name" v-model="selectedMenu.name">
<label for="link">链接:</label>
<input type="text" id="link" v-model="selectedMenu.link">
</form>
<button @click="saveMenu">保存</button>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const menus = ref([
{ id: 1, name: '首页', link: '/' },
{ id: 2, name: '产品', link: '/products' },
{ id: 3, name: '关于我们', link: '/about' },
]);
const selectedMenu = ref(null);
function addMenu() {
const newMenu = { id: menus.value.length + 1, name: '', link: '' };
menus.value.push(newMenu);
selectedMenu.value = newMenu;
}
function deleteMenu() {
if (selectedMenu.value) {
const index = menus.value.indexOf(selectedMenu.value);
menus.value.splice(index, 1);
selectedMenu.value = null;
}
}
function saveMenu() {
selectedMenu.value = null;
}
return {
menus,
selectedMenu,
addMenu,
deleteMenu,
saveMenu,
};
},
};
</script>
```
此示例中,我们使用了Vue3的Composition API来定义了一个基本的菜单管理组件。该组件包括一个菜单列表,添加和删除菜单的按钮,以及一个表单来编辑和保存选定的菜单。
我们使用`ref`来创建响应式的`menus`和`selectedMenu`数据,并在`setup`函数中定义了`addMenu`、`deleteMenu`和`saveMenu`方法,分别用于添加、删除和保存菜单。
在模板中,我们使用`v-for`指令来循环渲染菜单列表,使用`v-if`指令来控制表单的显示和隐藏。我们还使用`v-model`指令将表单元素与选定的菜单对象进行绑定,以使用户能够编辑菜单数据。
当用户单击添加菜单按钮时,我们创建一个新的菜单对象并将其添加到`menus`数组中,并将其设置为选定的菜单,以便用户可以编辑它。当用户单击删除菜单按钮时,我们从`menus`数组中删除选定的菜单,并将选定的菜单重置为`null`。当用户单击保存按钮时,我们将选定的菜单重置为`null`,以使表单隐藏。
这只是一个简单的示例,你可以根据自己的需求对其进行修改和扩展。