【前端7*】表格-表单2(弹窗在子组件)父子组件调用 vue element-ui

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

  • 写在最前面
  • 一、子组件 HelloWorld.vue
    • 1. 弹窗部分、将 visible 传值给父组件
    • 2.表单的 ruleForm 校验方法
    • 3.表单确认方法
    • 4. 提交确认方法:handleSummit
    • 5.表单渲染
  • 二、父组件 HomeView.vue
    • 1.新增按钮、查看和编辑
    • 2.引用子组件弹窗
    • 3.import 子组件
  • 三、页面显示模式(编辑和查看)逻辑
    • 1.子组件接受父组件传值(type:编辑、查看)
    • 2.父组件给子组件传值
    • 3.更新数据
  • 四、小结


请添加图片描述

🌈你好呀!我是 是Yu欸
🌌 2024每日百字篆刻时光,感谢你的陪伴与支持 ~
🚀 欢迎一起踏上探险之旅,挖掘无限可能,共同成长!

写在最前面

姊妹篇:
【前端5*】表格-表单1(弹窗在父组件)父子组件调用 vue element-ui
代码部分:【前端6*】表格-表单2(弹窗在父组件)父子组件调用 vue element-ui

全部代码:
我用夸克网盘分享了「form-table-demo (2).zip」,点击链接即可保存。
链接:https://pan.quark.cn/s/7cee269b3221
提取码:hXeC

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

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

两种区别,弹窗是否多次调用

按住 Alt,可以同时选中三个字段,然后 c
同样,按住 Alt,同时选中三个字段,然后 v

梳理后代码,主要为:
(子组件)E:\ui\参考代码\demo-new\src\components\HelloWorld.vue
(父组件)E:\ui\参考代码\demo-new\src\views\HomeView.vue

在这里插入图片描述

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

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

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

准备好了吗?让我们开始吧!

一、子组件 HelloWorld.vue

1. 弹窗部分、将 visible 传值给父组件

通过:visible.sync 传值给 el-dialog

<el-dialogtitle="子组件":visible.sync="dialogVisible"width="30%":before-close="handleClose">

将 visible 传值给父组件

<script>
export default {name: "HelloWorld",props: {visible: {type: Boolean,default: false,},},

记得在 data 中初始化 dialogVisible

data() {return {type: "",dialogVisible: false,

2.表单的 ruleForm 校验方法

<el-formref="ruleForm"label-width="100px"class="demo-ruleForm"inline:model="ruleForm":rules="rules":disabled="type === 'view'"><el-form-item label="日期" prop="date"><el-input v-model="ruleForm.date"></el-input></el-form-item>

然后在 data 中定义方法

data() {return {type: "",dialogVisible: false,ruleForm: {name: "",date: "",province: "",},rules: {date: [{ required: true, message: "请输入日期", trigger: "blur" }],name: [{ required: true, message: "请输入姓名", trigger: "blur" },{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },],province: [{ required: true, message: "请输入省份", trigger: "blur" },{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },],},};},

3.表单确认方法

<span slot="footer" class="dialog-footer"><el-button @click="handleClose">取 消</el-button><el-button type="primary" @click="handleSubmit">确 定</el-button></span>

4. 提交确认方法:handleSummit

提交确定:自定义校验规则

弹窗关闭时,写表单清空

取消、确认、X,关闭方法一样

handleClose() {this.dialogVisible = false;//清空ruleFormthis.ruleForm = {};},

有方法写方法,不要重复写 dis 显示

handleSubmit() {this.$refs["ruleForm"].validate((valid) => {if (valid) {this.$emit("submit", this.ruleForm);this.handleClose();} else {return false;}});},

5.表单渲染

(不需要)重新渲染组件(key++):

因为,tableData 有父组件定义引用,并且子组件传值给父组件,所以会直接显示

二、父组件 HomeView.vue

1.新增按钮、查看和编辑

<el-button icon="plus" @click="handleAdd">新增</el-button>
<el-table-column fixed="right" label="操作" width="100"><template slot-scope="scope"><el-button @click="handleView(scope.row)" type="text" size="small">查看</el-button><el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button></template></el-table-column>

2.引用子组件弹窗

<HelloWorld ref="childRef" @submit="handleSuccess"></HelloWorld>

3.import 子组件

<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {components: {HelloWorld,},

三、页面显示模式(编辑和查看)逻辑

1.子组件接受父组件传值(type:编辑、查看)

不能直接写 disable=“”,要先定义 type 的 data 和 methods

init(type,row)

[init] 方法的作用:根据不同的操作类型(查看、编辑或添加),初始化组件的状态,并准备显示相关的 UI 元素。

[init] 接收两个参数:[type][row]
[type] 参数用于指定操作的类型,而 [row] 参数包含了一些与当前操作相关的数据。

代码中注释掉的一行 // this.ruleForm = row; 展示了一个未启用的逻辑,即直接将 row 的值赋给 ruleForm 属性。然而,实际使用的逻辑更加细致。它通过一个 if 语句检查 type 属性的值是否为 viewedit。如果是,说明当前操作是查看或编辑,此时需要将 row 的数据赋给 ruleForm 属性以便使用。
这里使用了 JavaScript 的解构赋值语法 { ...row },这意味着创建了 row 的一个浅拷贝并赋值给 ruleForm,而不是直接使用 row 对象,这样做可以避免直接修改到原始的 row 数据。

methods: {init(type, row) {console.log(type);this.type = type;console.log("type", this.type);// this.ruleForm = row;// 当type为view或edit时,将row的值赋给ruleForm;当type为add时,不读row的值if (["view", "edit"].includes(this.type)) {// 解构,只拿ruleForm的row部分this.ruleForm = { ...row };}this.dialogVisible = true;},

先打印 row 参数,看传值成功没

在这里插入图片描述

然后把 row 在 init 函数中给他

子组件中需要传值 handleview(scope .row)

2.父组件给子组件传值

this.$refs["childRef"].init("add", {});

它调用了 childRef 组件实例上的 init 方法,并传递了两个参数:一个字符串 "add" 和一个空对象 {}

methods: {/**弹窗在子组件 */handleAdd() {console.log(this.$refs["childRef"]);this.$refs["childRef"].init("add", {});console.log("this.$refs", this.$refs);},handleEdit(row) {this.$refs["childRef"].init("edit", row);},handleView(row) {this.$refs["childRef"].init("view", row);},handleSuccess(data) {console.log("data", data);this.tableData.push(data);},},

在 Vue 中,this.$refs 是一个对象,其中包含了模板中所有带有 ref 属性的 DOM 元素或组件实例。当你在一个组件上使用 ref 属性时,例如 <ChildComponent ref="childRef" />,你可以通过 this.$refs.childRef 访问到这个组件实例。

这里的 .init 是一个方法,它需要在 childRef 组件内部被定义。这个方法的具体作用取决于 childRef 组件内部如何实现它。通常,这种方法用于初始化组件的状态或执行一些准备工作,参数用于指定初始化的类型或传递初始化所需的数据。

例如,如果 childRef 组件是一个弹窗组件,init 方法可能用于设置弹窗的模式(如添加模式)和初始化弹窗内的数据。

// 在 ChildComponent 组件中
methods: {
init(mode, data) {
// 根据 mode 和 data 参数初始化组件
}
}

这种模式允许父组件控制子组件的行为,通过直接调用子组件的方法来实现。

3.更新数据

两种方法:

①拿到当前行的索引index,传过去,再传回来,改数组的值

②用init,但是需要对vue生命周期比较熟悉

四、小结

希望本文对你有所帮助。如果你有任何疑问或需要进一步的帮助,请在评论区留言。祝你开发顺利!


hello,我是 是Yu欸 。如果你喜欢我的文章,欢迎三连给我鼓励和支持:👍点赞 📁 关注 💬评论,我会给大家带来更多有用有趣的文章。
原文链接 👉 ,⚡️更新更及时。

欢迎大家添加好友交流。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3246378.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

强化学习——多臂老虎机问题(MAB)【附python代码】

文章目录 一、问题描述1.1 问题定义1.2 形式化描述1.3 累积懊悔1.4 估计期望奖励 二、解决方法2.1 ϵ-贪婪算法2.2 上置信界算法2.3 汤普森采样算法2.4 小结 一、问题描述 1.1 问题定义 有一个用于 K 根拉杆的老虎机&#xff0c;每一根拉杆都对应一个关于奖励的概率分布 R 。每…

Python项目实战之-爬取全网小说资源

python爬虫实战-小说爬取 基于requests模块与lxml模块编写的爬虫 基本思路 主要内容分为三个部分 使用requests模块获取网页内容使用lxml模块进行网页解析将解析出来的数据存储进MySQL数据库中 获取网页内容 网站分析 获取各个分类的href标签 代码如下 def novel_sort…

JMeter接口测试之文件上传(参数提取与传递)

参考文档&#xff1a; Jmeter接口测试-文件上传&#xff08;全网最详细的教程&#xff09;_jmeter 文件上传-CSDN博客 1、首先通过fiddler抓取文件上传接口&#xff0c;在Raw的tab页中查看默认请求头以及请求参数 如图所示 2、在jmeter中导入抓取的接口&#xff0c;首先需要配…

ctfshow~菜狗杯 损毁的压缩包

题目给了一个.zip的压缩包&#xff0c;解压报错 用010Editor打开看一下&#xff0c;发现文件头是png的 把文件后缀改成png看一下&#xff0c;得到flag ctfshow{e19efe2eb86f10ccd7ca362110903c05}

【生命游戏】python刷题记录

目录 题目&#xff1a; 代码&#xff1a; 结果&#xff1a; 总结&#xff1a; 题目&#xff1a; 代码&#xff1a; class Solution:def gameOfLife(self, board: List[List[int]]) -> None:"""Do not return anything, modify board in-place instead.&…

rocky9.3操作系统安装记录

文章目录 一、镜像源二、安装的过程选择安装过程中语言安装信息摘要页面设置安装目的地设置管理员密码调整网络开始部署 一、镜像源 Rocky-9.3-x86_64-minimal.iso 二、安装的过程 选择安装过程中语言 安装信息摘要页面 设置安装目的地 不做操作&#xff0c;直接使用自动分…

2.10、matlab中字符、数字、矩阵、字符串和元胞合并为字符串并将字符串以不同格式写入读出excel

1、前言 在 MATLAB 中&#xff0c;可以使用不同的数据类型&#xff08;字符、数字、矩阵、字符串和元胞&#xff09;合并为字符串&#xff0c;然后将字符串以不同格式写入 Excel 文件。 以下是一个示例代码&#xff0c;展示如何将不同数据类型合并为字符串&#xff0c;并以不…

LoadRunner12通过代理录制脚本。

1、目前LR12录制脚本比较简单的方式有两种&#xff0c;还有一种是失败率太高 我这边基本没有成功过就不赘述了&#xff0c;这边写的是通过LR的代理服务器来进行录制。 2、首选配置LR的录制界面点击录制按钮&#xff0c;会显示出录制配置界面 3、在录制配置界面录制模式选择’通…

【C++刷题】[UVA 489]Hangman Judge 刽子手游戏

题目描述 题目解析 这一题看似简单其实有很多坑&#xff0c;我也被卡了好久才ac。首先题目的意思是&#xff0c;输入回合数&#xff0c;一个答案单词&#xff0c;和一个猜测单词&#xff0c;如果猜测的单词里存在答案单词里的所有字母则判定为赢&#xff0c;如果有一个字母是答…

性能测试工具原理与架构

在性能测试的学习过程中&#xff0c;坚持思想与工具&#xff08;分开&#xff09;并行&#xff0c;当前面世面上的性能测试书籍大多把理论与loadrunner融为一体讲解&#xff0c;这样做是正确的&#xff0c;因为有一些性能名词概念也源于工具。但是&#xff0c;性能测试不是load…

生物安全柜验证:气流流型、粒子、浮游菌等参考标准

生物安全柜也是制药行业常见设备&#xff0c;根据GMP的要求&#xff0c;需对生物安全柜定期进行验证确认&#xff0c;确保生物安全柜的性能满足GMP洁净厂房的相关要求。 生物安全柜是实验室的基本设备&#xff0c;也是生物安全实验室的一级安全隔离屏障。其最重要的作用就是气流…

简过网:公务员面试考什么?抓紧时间收藏!

你知道吗&#xff1f;在公务员考试中&#xff0c;其实笔试不是最难的&#xff0c;难的是面试&#xff0c;那么&#xff0c;公务员的面试都考什么呢&#xff1f;这篇文章告诉你答案&#xff01; ​ 对于公务员的面试一般可分为三种形式&#xff1a; 一、无领导&#xff1a; 什…

Unity | Shader基础知识(第十八集:Stencil应用-透视立方盒子)

目录 一、前言 二、场景布置 三、 shader部分 1.图片的部分 2.图片部分纯净代码 3.遮罩部分复习 4.深度写入 ZWrite 5.颜色遮罩ColorMask 6.遮罩纯净代码 四、场景中shader使用 五、作者的碎碎念 一、前言 因为这个内容稍微有点多&#xff0c;我尽力讲清楚了&#x…

Windows安装Nacos【超详细图解】

目录 一、下载 Nacos 二、解压 Nacos 三、编辑配置文件 四、创建数据库 五、启动 Nacos 六、进入控制台 一、下载 Nacos Nacos v2.3.2 官方网址 二、解压 Nacos 三、编辑配置文件 主要修改数据库用户名、密码、鉴权是否开启、key value和token # # Copyright 1999-2021 …

Fiddler抓包过滤host及js、css等地址

1、如上图所示 在Filter页面中勾选Hide if URL contains&#xff1b;输入框输入 REGEX:\.(js|css|png|google|favicon\?.*) 隐藏掉包含js、css、png、google等的地址&#xff1a; Hide if URL contains: REGEX:\.(js|css|png|google|favicon\?.*) 2、使Filters设置生效 A…

用Python实现学生信息管理系统

用Python来实现学生信息管理系统 学生信息管理系统&#xff08;Python&#xff09; 简介&#xff1a;基本信息管理和学生成绩管理。基本信息管理模块的主要功能有学生信息的添加、删除、修改、显示和学生数据的导入导出&#xff0c;学生成绩管理模块的主要功能有统计课程最高分…

面向 AI 而生的香橙派 AIpro 开发板开箱实测

前几天搞到一块很牛掰的开发板&#xff0c;是香橙派联合华为精心打造的高性能 AI 开发板 – OrangePi AIpro 开发板。 其搭载了昇腾 AI 处理器&#xff0c;可提供 8TOPS INT8 的计算能力&#xff0c;作为单板硬件设备来说&#xff0c;算力杠杠的了&#xff0c;至于跑 AI 模型性…

liunx面试题目

如何看当前Linux系统有几颗物理CPU和每颗CPU的核数&#xff1f; 查看物理cup&#xff1a; cat /proc/cpuinfo|grep -c ‘physical id’ 查看每颗cup核数 cat /proc/cpuinfo|grep -c ‘processor’ 若希望自动实现软件包的更新&#xff0c;可以使用yum-cron并启动该服务 yum -y …

C++ :友元函数

什么是友元函数 外部函数访问类内成员 (1)写一个Person类&#xff0c;内部有private、protected、public的三类访问权限的成员 (2)写一个外部函数disp_info来打印这三类成员 (3)代码实战 (4)总结&#xff1a;可以访问public的&#xff0c;但是protected和private的无法访问 (5…

8.FreeRTOS_队列集

队列集使用在系统需要支持多个输入设备的情况&#xff0c;这是每个输入设备的数据都存放在一个队列中&#xff0c;队列集将他们管理起来&#xff0c;可以实现实时识别哪一个队列中有数据并将数据读取出来。 相关配置 使用队列集的函数&#xff0c;需要先开启宏开关。具体操作…