一、效果

实现封装表格的新增、编辑、详情查看，表格刷新功能

实现表格组件中表单的封装

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