[TOC]

使⽤ Element 中 Card 卡⽚组件来进⾏布局。

// Element 官⽅示例：Card 卡⽚组件 class=“box-card”>
slot=“header” class=“clearfix”> 卡⽚名称 style=“float: right; padding: 3px 0” type=“text”> 操作按钮
v-for=“o in 4” :key=“o” class=“text item”> {{‘列表内容 ‘ + o }}

添加到菜单⻚⾯中 views/menu/index.vue

// views/menu/index.vue

将标题区域更改为添加菜单按钮，添加后跳转到添加菜单组件

// views/menu/index.vue …
slot=“header” class=“clearfix”> @click=“$router.push({name: ‘menu-create’})” >添加菜单
…

在 menu ⽬录下创建 create.vue，并创建初始结构。

// views/menu/create.vue

添加到路由表中。

// router/index.js … { path: ‘/menu/create’, name: ‘menu-create’, component: () => import(/ webpackChunkName: ‘menu-create’ / ‘@/views/menu/create’) } ]

下⾯通过 Element 的 Card 套 Form 的⽅式给 menu-create 进⾏布局。

将 Card 头部设置为标题。 将 Card 内容列表替换为 Form。 // views/menu/create.vue