当前位置: 首页 > news >正文

Vue3+setup实现父子组件单表增删改查写法模板

父组件写法

<el-card><!-- el-card 头部插槽 显示列表名和新增按钮 --><template #header><div class="table-header-container"><i class="fas fa-th" />角色列表(100)<span style="flex-grow: 1" />&nbsp;&nbsp;&nbsp;<!-- 新增按钮 --><el-buttonicon="fas fa-plus"type="text"style="margin: -10px 0px"@click="click_Add_Roles">&nbsp;新增监管角色</el-button></div></template><!-- el-table  显示表格  :data绑定数据--><el-table :data="tableData_List" :height="650" stripe ref="userTable"><el-table-columnlabel="序号"type="index":min-width="100"fixedalign="center"/><el-table-columnlabel="编码"prop="code"width="300"sortablealign="center"/><el-table-columnlabel="名称"prop="name"width="180"sortablealign="center"/><el-table-columnlabel="创建时间"prop="createdTime":formatter="formatDate"width="180"sortablealign="center"/><el-table-columnlabel="更新时间"prop="updatedTime":formatter="formatDate"width="180"sortablealign="center"/><el-table-column label="备注" prop="remark" align="center"></el-table-column><el-table-column label="操作" align="center" :min-width="120"><template #default="{ row }"><iclass="fas fa-edit"style="cursor: pointer; color: #409eff"@click="click_Edit(row)"/><iclass="fas fa-trash-alt"style="cursor: pointer; color: red"@click="click_Delete(row)"/></template></el-table-column></el-table><!-- 新增表单弹窗子组件 传入属性值及方法 --><AddRolesDialogref="AddRolesDialogRef":option="optionRoles":rowData="rowDataRoles":formTitle="formTitleRoles"@closeAuthorizeChildDialog="closeAuthorizeChildDialog"@get_SupRoles_List="get_SupRoles_List"></AddRolesDialog></el-card>
<script lang="ts" setup>
// 引入ui组件 加载效果及消息提示
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
// 引入moment插件
import moment from "moment";
import {computed,getCurrentInstance,onMounted,ref,defineProps,nextTick,watch,reactive,
} from "vue";// 引入api 可以是自己封装好的也可以是axios
import axios from "axios";
import { BAD_DATA_DISPLAY_CONTENT } from "@/constant";
// 引入新增表单弹窗子组件
import AddRolesDialog from "./AddRolesDialog.vue";
const { proxy }: any = getCurrentInstance();// 利用moment格式化时间绑定表格创建时间更新时间等
function formatDate(_row: any, _column: any, cellValue?: Date) {if (cellValue) {return moment(cellValue).format("YYYY-MM-DD HH:mm:ss");}//   定义好的常量  例如"--"return BAD_DATA_DISPLAY_CONTENT;
}
// ----------------------------------------------------------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------------------------------------------------------
// 定义子组件弹窗开关的布尔值和当前操作的表格行数据
const optionRoles = ref({dialogAuthorizeChildVisible: false,currectRowData: {},
});
// 定义子组件弹窗标题
const formTitleRoles = ref("新增监管角色");
// 定义表格当前行数据
const rowDataRoles = ref({});
// 定义子组件ref
const AddRolesDialogRef: any = ref();
// 定义表格数据源
const tableData_List: any = ref([]);//打开新增表单 更新属性值状态
const click_Add_Roles = () => {optionRoles.value.dialogAuthorizeChildVisible = true;formTitleRoles.value = "新增监管角色";
};
// 定义关闭子组件弹窗方法
const closeAuthorizeChildDialog = () => {optionRoles.value.dialogAuthorizeChildVisible = false;
};
// 定义编辑表格行方法 更改属性值 调用子组件编辑方法
const click_Edit = (row: any) => {formTitleRoles.value = "修改监管角色";rowDataRoles.value = row;AddRolesDialogRef.value.editToForm(row);optionRoles.value.dialogAuthorizeChildVisible = true;
};
// 定义表格行数据删除方法
const click_Delete = (row: any) => {ElMessageBox.confirm(`确定删除该角色吗?`, "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {proxy.axios.delete(`/pcadmin/regulator-role-manage/roles/${row.id}`).then(({ data }: { data: any }) => {ElMessage({type: "success",message: "删除成功",});get_SupRoles_List();}).catch((err: any) => {console.error(err);});}).catch(() => {});
};// 获取监管角色列表
const get_SupRoles_List = () => {let loadingInstance: any = null;loadingInstance = ElLoading.service({lock: true,text: "加载中...",background: "rgba(0, 0, 0, 0.7)",});proxy.axios.get(`/pcadmin/regulator-role-manage/roles`).then(({ data }: { data: any }) => {console.log(data, "获取列表");tableData_List.value = [];tableData_List.value = data.data;if (loadingInstance) {loadingInstance.close();}}).catch((err: any) => {console.error(err);if (loadingInstance) {loadingInstance.close();}});
};onMounted(() => {get_SupRoles_List();
});
</script>


子组件写法

<!-- 显示自定义弹窗 绑定弹窗关闭打开关闭方法及是否显示弹窗标题--><el-dialog@close="closeAuthorizeChildDialog"@open="clearForm"v-model="option1":title="props.formTitle"width="30%"><el-form :model="form"><el-form-item label="编码" prop="code" :label-width="formLabelWidth"><el-inputplaceholder="请输入"class="inputForm"v-model="form.code"autocomplete="off"/></el-form-item><el-form-item label="名称" prop="name" :label-width="formLabelWidth"><el-inputplaceholder="请输入"class="inputForm"v-model="form.name"autocomplete="off"/></el-form-item><el-form-item label="备注" prop="remark" :label-width="formLabelWidth"><el-inputplaceholder="请输入内容"class="inputForm"v-model="form.remark"type="textarea"/></el-form-item><el-form-itemlabel="序列号"prop="sortOrder":label-width="formLabelWidth"><el-inputplaceholder="请输入"class="inputForm"v-model="form.sortOrder"autocomplete="off"/></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="closeAuthorizeChildDialog">取消</el-button><el-button type="primary" @click="onClick_SaveForm"> 确定 </el-button></div></template></el-dialog>
<script lang="ts" setup>
import {ref,defineProps,reactive,onMounted,toRef,defineEmits,getCurrentInstance,computed,defineExpose,
} from "vue";
import { ElMessage } from "element-plus";
// 引入api 可以是自己封装好的也可以是axios
import axios from "axios";
const { proxy }: any = getCurrentInstance();
// 接受父组件传过来的数据
const props = defineProps({option: Object,rowData: Object,formTitle: String,
});
// 表单label宽度
const formLabelWidth = "60px";
// 将父组件传来的option通过toRef转换成响应式数据
const option = toRef(props, "option");
// 接收父组件传来的方法
const emit = defineEmits(["closeAuthorizeChildDialog", "get_SupRoles_List"]);
// 定义form表单初始数据
const form: any = reactive({id: "",code: "",name: "",sortOrder: "",remark: "",
});
//周期函数
onMounted(() => {//打印父组件传递的值
});
// 定义清空form表单数据方法 判断只有新增的时候清空,编辑不清空
const clearForm = () => {if (props.formTitle == "新增监管角色") {form.code = "";form.name = "";form.sortOrder = "";form.remark = "";form.id = "";}
};
// 定义编辑form表单方法 接收实参,形参赋值,拿到要编辑行数据的id
const editToForm = (val: any) => {form.id = val.id;form.code = val.code;form.name = val.name;form.sortOrder = val.sortOrder;form.remark = val.remark;
};
// 方法暴露给父组件
defineExpose({ editToForm });// 定义关闭弹窗方法
const closeAuthorizeChildDialog = () => {emit("closeAuthorizeChildDialog");
};
// 定义一个新变量,用于控制弹窗双向绑定的布尔值
const option1 = computed({get: () => option.value?.dialogAuthorizeChildVisible,set: (val: any) => {emit("closeAuthorizeChildDialog");},
});//新增编辑保存
const onClick_SaveForm = () => {// 关闭弹窗closeAuthorizeChildDialog();//   判断是编辑还是新增if (props.formTitle == "新增监管角色") {let params = {code: "",name: "",sortOrder: "",remark: "",};params.code = form.code;params.name = form.name;params.sortOrder = form.sortOrder;params.remark = form.remark;proxy.axios.post(`/pcadmin/regulator-role-manage/roles`, params).then(({ data }: { data: any }) => {if (data.errorcode == 0) {ElMessage.success("新增成功!");emit("get_SupRoles_List");} else {ElMessage.warning(data.message);}}).catch((err: any) => {console.error(err);ElMessage.warning(err);});} else {let params = {code: "",name: "",sortOrder: "",remark: "",};params.code = form.code;params.name = form.name;params.sortOrder = form.sortOrder;params.remark = form.remark;proxy.axios.put(`/pcadmin/regulator-role-manage/roles/${form.id}`, params).then(({ data }: { data: any }) => {if (data.errorcode == 0) {ElMessage.success("编辑成功!");emit("get_SupRoles_List");} else {ElMessage.warning(data.message);}}).catch((err: any) => {ElMessage.warning(err);console.error(err);});}
};
</script>

相关文章:

Vue3+setup实现父子组件单表增删改查写法模板

父组件写法 <el-card><!-- el-card 头部插槽 显示列表名和新增按钮 --><template #header><div class"table-header-container"><i class"fas fa-th" />角色列表&#xff08;100&#xff09;<span style"flex-grow…...

jmeter 录制APP脚本

一、手机 1、修改网络 代理选择手动→填写服务器主机名&#xff08;电脑IP&#xff0c;如&#xff1a;192.1xx.x.xx&#xff09;→服务器端口&#xff08;任意未被占用端口&#xff0c;如&#xff1a;8888&#xff09; 2、安装证书 手机浏览器访问服务器主机名:服务器端口&a…...

C++类与对象深度解析(一):从抽象到实践的全面入门指南

文章目录 C 类与对象——详细入门指南前言1. 类的定义1.1 类定义的基本格式示例代码解释 1.2 访问限定符示例代码解释 1.3 类域示例代码解释 1.4 成员命名规范常见的命名约定&#xff1a;示例&#xff1a;拓展&#xff1a; 1.5 class与struct的默认访问权限示例&#xff1a; 2.…...

docker拉取 jdk 8

docker pull openjdk:8docker run -d -it --name java-8 openjdk:8docker run -d -it --name java-8 openjdk:8 –name java-8 容器名&#xff0c;自定义的 openjdk:8 镜像名&#xff1a;标签名 &#xff0c; 使用 docker images 查看 2、查看已运行的容器实例&#xff1a; doc…...

机器学习VS深度学习

机器学习&#xff08;Machine Learning, ML&#xff09;和深度学习&#xff08;Deep Learning, DL&#xff09;是人工智能&#xff08;AI&#xff09;的两个子领域&#xff0c;它们有许多相似之处&#xff0c;但在技术实现和应用范围上也有显著区别。下面从几个方面对两者进行区…...

基于vue框架的宠物交流平台1n2n3(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;会员,宠物信息,宠物类型,团队信息,申请领养,团队申请,领养宠物 开题报告内容 基于Vue框架的宠物交流平台开题报告 一、项目背景 随着现代生活节奏的加快与人们情感需求的日益增长&#xff0c;宠物已成为众多家庭不可或缺的重要成员。…...

Rust 所有权 借用与引用

文章目录 发现宝藏1. 所有权&#xff08;Ownership&#xff09;2. 引用&#xff08;References&#xff09;2.1 不可变引用2.2 可变引用2.3 引用的规则 3. 悬垂引用&#xff08;Dangling References&#xff09;4. 借用&#xff08;Borrowing&#xff09;结论 发现宝藏 前些天…...

构建智能电商新生态:深度解析京东商品详情API的力量

在当今数字化浪潮中&#xff0c;智能电商系统已成为推动零售业转型升级的重要引擎。作为电商行业的领军者之一&#xff0c;京东凭借其庞大的商品数据库和先进的技术架构&#xff0c;为开发者与商家提供了丰富的API接口&#xff0c;其中商品详情API无疑是构建智能电商系统的关键…...

Golang | Leetcode Golang题解之第398题随机数索引

题目&#xff1a; 题解&#xff1a; type Solution []intfunc Constructor(nums []int) Solution {return nums }func (nums Solution) Pick(target int) (ans int) {cnt : 0for i, num : range nums {if num target {cnt // 第 cnt 次遇到 targetif rand.Intn(cnt) 0 {ans …...

使用注意力机制可以让你的模型更加灵活,但是需要额外的计算资源。rnn lstm bilstm attension

确实&#xff0c;使用注意力机制可以使模型更加灵活&#xff0c;但也确实需要额外的计算资源。注意力机制允许模型在处理序列数据时&#xff0c;能够动态地关注不同位置的重要性&#xff0c;从而更好地捕捉长依赖关系。下面是一个简单的注意力机制实现示例&#xff0c;可以帮助…...

git命令大全

简介&#xff1a;个人学习分享&#xff0c;如有错误&#xff0c;欢迎批评指正 一、Git操作流程 1、代码提交和同步代码 第零步: 工作区与仓库保持一致第一步: 文件增删改&#xff0c;变为已修改状态第二步: git add &#xff0c;变为已暂存状态 $ git status $ git add --al…...

【数据仓库】数据仓库常见的数据模型——范式模型

目录 一、范式 1、第一范式 2、第二范式 3、第三范式 4、进一步范式化&#xff1a;BCNF、4NF 和 5NF 简介 &#xff08;1&#xff09;Boyce-Codd 范式&#xff08;BCNF&#xff09; &#xff08;2&#xff09;第四范式&#xff08;4NF&#xff09; &#xff08;5&#x…...

【LeetCode每日一题】——LCR 078.合并 K 个升序链表

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目注意】六【题目示例】七【题目提示】八【解题思路】九【时间频度】十【代码实现】十一【提交结果】 一【题目类别】 优先队列 二【题目难度】 困难 三【题目编号】 LCR 078.合并 K 个升序链表 …...

代码随想录算法训练营第五十九天 | dijkstra(堆优化版)精讲

目录 dijkstra&#xff08;堆优化版&#xff09;精讲 思路 堆优化细节 方法一&#xff1a; 最小堆优化 dijkstra&#xff08;堆优化版&#xff09;精讲 题目链接&#xff1a;卡码网&#xff1a;47. 参加科学大会 文章讲解&#xff1a;代码随想录 小明是一位科学家&#x…...

go语言后端开发学习(七)——如何在gin框架中集成限流中间件

一.什么是限流 限流又称为流量控制&#xff08;流控&#xff09;&#xff0c;通常是指限制到达系统的并发请求数。 我们生活中也会经常遇到限流的场景&#xff0c;比如&#xff1a;某景区限制每日进入景区的游客数量为8万人&#xff1b;沙河地铁站早高峰通过站外排队逐一放行的…...

SpringBoot2:web开发常用功能实现及原理解析-整合EasyExcel实现Excel导入导出功能

1、工程包结构 主要是这5个Java类 2、导入EasyExcel包 这里同时贴出其他相关springboot的基础包 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><depend…...

CTFShow-信息搜集

Web1&#xff1a; ​ 题目描述&#xff1a;开发注释未及时删除 。 ​ 打开题目后提示web1:where is flag? ​ ctrlu读取源码。 Web2&#xff1a; ​ 题目描述&#xff1a;js前台拦截 无效操作 ​ 打开题目后显示&#xff1a;无法查看源代码 ​ 右键无法用&#xff0c;…...

Facebook的虚拟现实功能简介:社交网络的新前沿

在科技飞速发展的今天&#xff0c;虚拟现实&#xff08;VR&#xff09;已经从科幻小说中的梦想变成了触手可及的现实。作为全球领先的社交平台&#xff0c;Facebook&#xff08;现已更名为Meta&#xff09;正大力推动虚拟现实技术的发展&#xff0c;以重新定义用户的社交体验。…...

Redis embstr 编码

embstr 编码 是 Redis 中一种优化存储小型字符串的编码方式。它是 Redis 内部存储字符串的多种方式之一&#xff0c;特别适用于存储长度不超过 44 字节的小字符串。...

【Elasticsearch系列二】安装 Kibana

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

Python Ovito统计金刚石结构数量

大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

在 Spring Boot 项目里,MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…...