[TOC]

Tree 组件具有 default-checked-keys 属性，值为数组，当 node-key 为 id 时，数组内存放的 id 对应的选项会被选择。

这时通过接⼝来请求当前⻆⾊拥有的菜单列表，接⼝地址。

// services/menu.js … // 获取⻆⾊拥有的菜单列表 export const getRoleMenus = roleId => { return request({ method: ‘GET’, // 下⾯两种⽅式均可 // url: /boss/menu/getRoleMenus?roleId=${roleId}, url: ‘/boss/menu/getRoleMenus’, params: { // axios 会把 params 转换为 urlencoded 并以 ? 连接到 url 后 roleId } }) }

引⼊并调⽤

// alloc-menu.vue .. import { getMenuNodeList, allocateRoleMenus, getRoleMenus } from ‘@/services/menu’ … created () { … // 加载⻆⾊拥有的菜单列表 this.loadRoleMenus() }, … async loadRoleMenus () { // 请求⻆⾊拥有的菜单列表 const { data } = await getRoleMenus(this.roleId) if (data.code === ‘000000’) { console.log(data) } },

观察响应数据可以发现，每⼀个菜单项都具有 selected 属性，以此判断是否选中，我们拿到这些数据的id，并设置给 default-checked-keys 即可。

// alloc-menu.vue ref=“menu-tree” node-key=“id” :data=“menus” :props=“defaultProps” show-checkbox :default-expand-all=“true” :default-checked-keys=“checkedKeys” > …