vue element-ui 中表单弹框的使用

• 写在最前面
• 零、准备工作
• • 1.搭建 vue 环境
  • 2.安装 element-ui 组件
  • 3.在 main.js 引入 element-ui 组件
  • 4.把 App.vue 中的页面跳转注释掉
• 一、完成父组件-表单的前端、以及跳转逻辑
• • 0.事件处理与数据绑定
  • 1.前端 ui-固定列表格
  • 2.再写 import
  • 3.写 script 的方法：新增、编辑、查看、关闭
  • 4.提交确认方法：handleSummit
  • 5.写 template 的弹窗，包含表单的确认和取消按钮
• 二、完成子组件的表单
• • 1.前端 ui-表单验证
  • 2.声明 name，方便父组件调用
  • 3.必填校验 ruleForm
  • 4.写子组件给父组件传值
  • 5.验证是否传值成功
  • 6.页面渲染
• 三、页面显示模式（编辑和查看）逻辑
• • 1.接收父组件的值
  • 2.测试 type
  • 3.refs 方法需要监听
  • 4.子组件表单 编辑禁用
  • 5.回显数值
  • 6.更新数据
• 四、小结

写在最前面

感谢神仙实习单位，老师手把手教O(∩_∩)O~感谢侃哥的讲解，感谢雅欣的讲解录制。

后面对着视频又看了一遍，然后重新写了一遍，梳理流程加快后面代码速度。

注意命名，写具体的如 addView，尽量不写 add

子组件命名需要为double word，每个word用首字母大写

梳理后代码，主要为：
（子组件）E:\ui\参考代码\demo-new\src\components\detail.vue
（父组件）E:\ui\参考代码\demo-new\src\views\Home.vue

在现代Web开发中，表格和表单是用户交互中最常见的元素。无论是数据展示、编辑，还是信息提交，都离不开表格与表单的有效结合。Vue.js作为一个渐进式的JavaScript框架，配合Element-UI这样强大的组件库，可以大大简化开发流程，提高开发效率。

在本系列的第一篇文章中，我们将梳理如何在Vue.js中使用Element-UI实现表格与表单的结合：如何在父组件中通过按钮触发弹窗，并在弹窗中调用子组件的表单。
这种设计模式在实际项目中非常常见，特别是在需要对数据进行增删改查操作时，能够有效地提升用户体验和代码可维护性。

本文将分为以下几个部分：

1、环境配置与基础介绍
2、父子组件的结构与数据传递
3、使用Element-UI实现弹窗与表单
4、完整示例代码与详细解析（后面一篇博客）

准备好了吗？让我们开始吧！

零、准备工作

1.搭建 vue 环境

参考：【前端环境 3】已有代码配置 vue 环境 + 使用 vue ui 图形化界面创建 vue 项目 + vue 项目目录结构

https://blog.csdn.net/WTYuong/article/details/139917509

2.安装 element-ui 组件

npm i element-ui -S 

3.在 main.js 引入 element-ui 组件

import ElementUI from "element-ui"; import "element-ui/lib/theme-chalk/index.css"; Vue.use(ElementUI); 

4.把 App.vue 中的页面跳转注释掉

一、完成父组件-表单的前端、以及跳转逻辑

父子组件的结构与数据传递

在这个示例中，我们将创建两个组件：一个父组件和一个子组件。父组件将包含一个表格和一个触发弹窗的按钮，子组件则是弹窗中的表单。

0.事件处理与数据绑定

在父组件中，我们使用v-bind和v-on进行数据和事件的绑定：

v-bind用于将数据从父组件传递到子组件。
v-on用于监听子组件触发的事件并在父组件中处理。

1.前端 ui-固定列表格

https://element.eleme.cn/

2.再写 import

注意 import 子组件

如果是公共组件，则组件写在路径下 src\components\HelloWorld.vue

如果是页面跳转组件，则在路径下 src\views\components\details.vue

2.声明 name，方便父组件调用