[TOC]
这⾥使⽤ Element 的 Tree 树形控件组件。 // Element 官⽅示例：Tree 树形控件基础⽤法 :data=“data” :props=“defaultProps” @node-click=“handleNo deClick”>

引⼊到⻚⾯中，去除事件。

设置⼀个 Card 作为容器。

设置默认全部展开，使⽤ 组件的 default-expand-all 属性。

设置复选框展示，使⽤ 组件的 show-checkbox 属性。

data 代表树形图的数据，更改为 menus 避免混淆。

props 代表读取数据时，属性对应的功能，因为请求接⼝时，不是所有接⼝都⽤ label 表示标题，这时就可以设置 props 了。

下⾯请求所有菜单数据，接⼝地址。

// services/menu.js … // 获取所有菜单并按层级展示（注意，这是菜单功能，保存到 menu.js 中） export const getMenuNodeList = () => { return request({ method: ‘GET’, url: ‘/boss/menu/getMenuNodeList’ }) }

引⼊并请求数据

// alloc-menu.vue … import { getMenuNodeList } from ‘@/services/menu’ … created () { // 加载所有菜单 this.loadMenus() }, methods: { async loadMenus () { // 请求所有菜单数据 const { data } = await getMenuNodeList() if (data.code === ‘000000’) { console.log(data) } } }

由于对应标题和层级的属性与默认名称不同，需要进⾏设置，同时 menus 中的默认数据也可以删除了。

// alloc-menu.vue … data () { return { menus: [], defaultProps: { children: ‘subMenuList’, label: ‘name’ } } }, methods: { async loadMenus () { const { data } = await getMenuNodeList() if (data.code === ‘000000’) { // 绑定数据 this.menus = data.data } } }