[TOC]
使⽤ Element 的 Table 表格组件处理 // Element 官⽅示例： Table 表格组件

设置到 menu/index.vue 中

// menu/index.vue

根据功能，修改表格内容。

// menu/index.vue :data=“tableData” style=“width: 100%”> prop=“date” label=“编号”> prop=“name” label=“菜单名称”> prop=“address” label=“菜单级数”> prop=“address” label=“前端图标”> prop=“address” label=“排序”> prop=“address” label=“操作”>

封装接⼝请求功能

// services/menu.js … // 获取所有菜单 export const getAllmenu = () => { return request({ method: ‘GET’, url: ‘/boss/menu/getAll’ }) } export const getAllmenu = () => { return request({ method: ‘GET’, url: ‘/boss/menu/getAll’ }) }

引⼊并请求数据，请求成功保存到 data 中（store 中存在即可，视图问题下⼀步处理）。

// menu/index.vue

将数据展示到模板中

// menu/index.vue :data=“menus” style=“width: 100%”> label=“编号” type=“index”> prop=“name” label=“菜单名称”> prop=“level” label=“菜单级数”> prop=“icon” label=“前端图标”> prop=“orderNum” label=“排序”> <!— 操作中不是内容，⽽是操作按钮，⽆需设置 prop，结构单独处理，宽度 150 可选 —> label=“操作” width=“”150>

操作部分需要对 Table 进⾏⾃定义。

注意： Element 的 Table 组件使⽤的 slot-scope=”scope” 是 Vue.js 在 2.6 版本之前的作⽤域插槽语法，已被废弃。现⾏版本语法中使⽤ v-slot 指令进⾏作⽤域插槽设置。 scope 是作⽤域插槽中接收的、由组件内部提供的数据，可⾃⾏命名并在