[TOC]
上级菜单数据需要请求接⼝得到，并渲染在模板中。 ⽤于获取菜单的接⼝有两个，获取所有菜单 与 获取编辑菜单⻚⾯信息。观察功能示例发现，菜单分为⼀级 菜单和⼆级菜单，⽽⼆级菜单⽆法作为“上⼀级菜单”使⽤，所以这⾥使⽤第⼆个接⼝进⾏操作。 接⼝使⽤时需要传请求参数 id，添加传⼊ -1，编辑传⼊对应 id，区别为添加操作的菜单信息 menuInfo为 null。

上级菜单处理 - 图1

我们需要使⽤的为 parentMenuList 字段信息，内部的每个元素均为⼀级菜单，元素如具有 subMenuList 则说明存在⼦菜单（⼆级菜单）。

接下来设置接⼝请求⽅法。

// services/menu.js … // 获取编辑菜单⻚⾯信息 // - 请求参数为 id，默认值为 -1 export const getEditMenuInfo = (id = -1) => { return request({ method: ‘GET’, // 请求参数： // url: /boss/menu/getEditMenuInfo?id=${id}, url: ‘/boss/menu/getEditMenuInfo’, params: { id } }) } …

created 中请求数据。

// menu-create.vue …

如果请求成功，将响应数据的 parentMenuList 保存到 data 中并进⾏列表渲染。

// menu-create.vue … data () { return { form: { … }, // 存储上级列表信息 parentMenuList: [] } }, … methods: { async onSubmit () { … }, async loadMenuInfo () { const { data } = await getEditMenuInfo() // 请求成功，保存到 data 中 if (data.code === ‘000000’) { this.parentMenuList = data.data.parentMenuList } } } // menu-create.vue … label=“上级菜单”> v-model=“form.region” placeholder=“请选择上级菜单”> :label=“item.name” :value=“item.id” v-for=“item in parentMenuList” :key=“item.id” > …

添加“⽆上级菜单选项”

// menu-create.vue … v-model=“form.parentId” placeholder=“请选择上级菜单”> :value=“-1” label=“⽆上级菜单” > :label=“item.name” :value=“item.id” v-for=“item in parentMenuList” :key=“item.id” > …