用vue2的一个菜单管理页面
时间: 2024-02-28 11:52:59 浏览: 212
好的,以下是一个使用 Vue 2 的菜单管理页面的示例代码:
```html
<template>
<div>
<h2>菜单管理</h2>
<div>
<el-tree
:data="menuList"
:props="{ label: 'name', children: 'children' }"
show-checkbox
default-expand-all
node-key="id"
></el-tree>
</div>
<div>
<el-button type="primary" @click="saveMenu">保存</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
menuList: [
{
id: 1,
name: '菜单1',
children: [
{
id: 2,
name: '子菜单1',
},
{
id: 3,
name: '子菜单2',
},
],
},
{
id: 4,
name: '菜单2',
children: [
{
id: 5,
name: '子菜单3',
},
],
},
],
};
},
methods: {
saveMenu() {
const checkedNodes = this.$refs.tree.getCheckedNodes();
console.log(checkedNodes);
// 发送保存请求...
},
},
};
</script>
```
上述代码使用了 Element UI 的 `el-tree` 组件展示菜单列表,并支持多选。用户勾选菜单后,可以点击保存按钮将勾选的菜单信息发送到后端进行保存。你可以根据实际需求对代码进行修改。
阅读全文