vue3:十三、分类管理-表格--编辑、新增、详情、刷新
一、效果
实现封装表格的新增、编辑、详情查看，表格刷新功能
实现表格组件中表单的封装
1、新增
如下图，新增页面显示空白的下拉，文本框，文本域，并实现提交功能
2、编辑
如下图，点击行数据，可将行数据展示到编辑弹窗，并实现提交功能
3、详情
如下图，点击行数据，可将行数据展示到详情页弹窗，弹窗数据只读不可编辑
二、初始页面定义、官网参考
1、官网参考
(1)表单组件
Form 表单 | Element Plus
(2)拟态框
Dialog 对话框 | Element Plus
2、初始工作
(1)定义新组件页面
在components中新建一个组件Form.vue
(2)定义新表单组件页面
在components中新建一个组件Table.vue
(3)定义分类数据获取接口页面
在api中新建一个专门获取分类数据的接口category.js
三、实现
1、分类主页面
路径：src/views/CategoryView.vue
(1)父页面定义表单组件项
在分类主页面中定义表格组件需要用到的项
引用vue方法
需要使用变量，即需要引入vue的方法reactive
定义表单项
这里定义一个数组变量formItems，这里展示了表单项的
- 名称：label
- 字段名称：field
- 提示词：placeholder
- 表单项的类型：type(例如文本框input,文本域textarea,下拉列表select等)
- 规则：rules（表单项的规则）
- 下拉的选项：options(包含label:字段名称，value:字段id)
//定义需要的表单数据
const formItems = reactive([{label: '父分类', field: 'pid', placeholder: '请选择父分类', type: 'select',rules: [{ required: true, message: '请选择父分类', trigger: 'change' },],options: [{ label: '无', value: 0 }]},{label: '分类名称', field: 'name', placeholder: '请输入分类名称', type: 'text',rules: [{ required: true, message: '请输入分类名称', trigger: 'blur' },{ min: 3, max: 5, message: '名称长度请在3-5字符之间', trigger: 'blur' },]},{ label: '分类描述', field: 'desc', type: 'textarea', placeholder: '请输入分类描述' },
])(2)定义表单项中下拉数据
定义api
新建接口
新建期望
返回数据
{"code": 1,"msg": "成功","data": [{"id": 1,"pid": 0,"name":"分类1","desc":"父分类1"},{"id": 2,"pid": 0,"name":"分类2","desc":"父分类2"},{"id": 3,"pid": 0,"name":"分类3","desc":"父分类3"},]
}接口页面写入接口
在api/category.js中获取get请求，并且对父分类列表进行查询，并导出
import { get } from '@/utils/request'//查询分分类的信息
export function getCategoryPid() {return get('/category/pidlist')
}
方法引入
页面获取父分类列表
执行获取父分类列表的方法
成功的话，将获取的数组整合成我们需要的下拉列表的格式{label:xxx,value:xxx}
这里使用map对数组进行循环，然后对表单项的首项(这里的首项就是下拉列表)进行数据插入(也就是每一项提取出label和value然后将数据插入到首项的options中)
//定义父级分类
getCategoryPid().then(res => {if (res.code == 1) {res.data.map(item => {formItems[0].options.push({ label: item.name, value: item.id })})}
})(3)表单项数组传入表格
将获取的表单数据项通过参数传入Tables组件中
2、表格组件页面Table.vue
路径：src/components/Table.vue
(1)参数处理
将父页面传来的表单的数据，在表格组件中进行定义
(2)表单组件
引用方法
表单的使用
在视图层直接写入弹窗，将表单组件写入弹窗
- 弹窗的v-model:dialogFromVisible控制弹窗是否显示，是一个布尔值 (
true显示，false隐藏)， - 标题为变量dialogFromTitle
- 表单组件：
ref用于父组件调用子组件的方法,这里使用formComponentRef定义- 传递父组件获取的表单项formItems，
- 写入组件提交所需要用到的路径submitUrl，
- 写入表格传递给表单模式mode(新增/编辑/详情)
<!-- 弹窗 -->
<el-dialog v-model="dialog