誉天程序员-2301-3-day07

知识回顾

实现一个业务功能点所需要小的技术点，这些点功能组成就完成整个功能

1、声明一个菜单项（配置路由）

/router/index.js
配置路由表，name名称（菜单项），path（路由跳转，唯一），component（对应子组件），meta（面包屑）

		children: [		
			{
				name: '用户管理',
				path: '/admin/user',
				component: ()=>import('../pages/admin/user.vue'),
				meta: {title: '系统管理 / 用户管理'}
			},
			{
				name: '书籍管理',
				path: '/book/book',
				component: ()=>import('../pages/book/book.vue'),
				meta: {title: '图书管理 / 书籍管理'}
			}
		]

2、去写菜单 menu.vue

菜单项，可以写死，从数据库读取。（自己扩充）
path必须和路由表中定义的path一致，不一致就找不到了。

	const MenuItems = [
		{name:"首页", path:"/", icon:'MostlyCloudy'},
		{name:"用户管理", path:"/admin/user", icon:'User'},
		{name:"图书管理", path:"/book/book", icon:'Setting'},
		{name:"关于我们", path:"/about", icon:'Apple'}
	]

动态加载组件

日常引入vue组件写死，但是这里动态去取每个小图标（组件），必须使用下面语法

3、创建/admin/user.vue

通过目录进行分类（分模块）
1）表格 el-table
:data=“tableData”，准备数据，必须响应式（ref包装，reactive包装），如果要更改 let（变量）
2）表单项
prop代表tableData一行数据中某个属性，label页面展现名称， label-width=“120” 设置宽度
3）给表单项加一个槽，槽的好处是，vue它就会给我们额外一些支持，例如：scope对象，这个对象非常有用，它row行对象，就可以取代行里元素值，$index获取到当前行的索引值，cellValue当前字段它具体值。