誉天程序员-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当前字段它具体值。
<template #default=“scope”>


上面结构比较复杂，它支持两件事情
a. 支持formateSex它自定义转换函数，当每行数据渲染时（组织数据过程）遇到sex字段，vue会回调你写的这个方法（扩展）
sex=0，展示女，sex=1，展示男（数据库存储数字，快）前台就需要去做这个转换展示中文，用户体验好。
b. 槽就可以把它需要参数给它：scope.row.sex
c. 通用的解决方案，它直接支持html标签，它默认是不解析原样输出。v-html支持html标签的解析。

4）
表格列支持自定义函数转换展现内容，最常用写法
:formmatter配合自己要写一个转换函数：formatIsUse

5）准备表格数据
a.无需包装，只能展示；b. 使用ref包装，tableData.value访问；c.reactive包装，直接访问
let tableData = reactive([
{ username:‘陈子枢’, sex:1, isUse:0, createTime:‘2023-01-02’ },
{ username:‘刘沛霞’, sex:0, isUse:1, createTime:‘2023-02-02’ },
{ username:‘王子博’, sex:1, isUse:0, createTime:‘2023-03-02’ }
])

6）新增按钮（转向新增页面 toAdd），新增页面，处理一条新增数据，保存
a. 点击“新增按钮”（转向新增页面），“进入”新增页面（隐藏div，默认这个div不展现：display=none/block）el-drawer设置不展现
把这个组件展示出来，el-drawer就有一个变量开关来控制div的是否展现
在 通过这个变量来控制是否展现，这个变量的名称自己定义
在

7）修改按钮（转向修改页面 toEdit）
复用了修改页面，通过状态drawerType，自定义，它就可以判断是新增还是修改。
传递修改参数，哪条记录，scope.row

8）删除按钮（直接执行 handleDel）
传递要删除索引值：scope.$index

9）新增保存
根据drawerType判断是新增
操作数组，push(form)。
声明form变量，临时保存新增数据。
drawer页面e-form表单v-mode值和form的属性

10）修改保存
进入修改页面，根据选择某条数据，vue框架自动把scope.row它就值赋值 form对应的元素（v-model），这是它的内部机制
drawer.el-form中数据和form变量对应，也和row对应。
所以我改drawer某个属性，页面被选中的行的数据才被更改。
但是这样是有副作用，数据已经被改变，当没有提交，取消，数据回不去。
Object.assign赋值一个新的数组，打断之前它们的关联，把form和页面row打断。

4、常用的页面组件

1、输入框

#prepend前缀，#append后缀修饰

<el-input v-model="input2" placeholder="Please input">
      <template #append>.com</template>
    </el-input>

2、下拉框

正常下拉框，你看到的值（label）和最终提交的值（value）一致
学历：1-高职、2-大专、3-本科、4-研究生、5-博士生

注意，下拉框回显。
如果value类型必须一致，要整数都整数，要字符串都字符串。
才能自动去匹配回显。

<el-select v-model="form.sex" placeholder="请输入性别">
	<el-option label="男" value="1"/>
	<el-option label="女" value="0"/>
</el-select>

3、单选

4、多选
表格需要多选删除，checkbox

5、日期
支持，：日期，时间，日期+时间，时间段（两个时间）