vue3表格,编辑案例

index.vue

<script setup>
import { onMounted, ref } from "vue";
import Edit from "./components/Edit.vue";
import axios from "axios";// TODO: 列表渲染
const list = ref([]);
const getList = async () => {const res = await axios.get("/list");list.value = res.data;
};
onMounted(() => {getList();
});// TODO: 删除功能
const onDelete = async (id) => {console.log("id", id);await axios.delete(`/del/${id}`);getList();
};// TODO: 编辑功能
const editRef = ref(null);
const onEdit = (row) => {editRef.value.open(row);
};
</script><template><div class="app"><el-table :data="list"><el-table-column label="ID" prop="id"></el-table-column><el-table-column label="姓名" prop="name" width="150"></el-table-column><el-table-column label="籍贯" prop="place"></el-table-column><el-table-column label="操作" width="150"><template #default="{ row }"><el-button type="primary" @click="onEdit(row)" link> 编辑 </el-button><el-button type="danger" @click="onDelete(row.id)" link>删除</el-button></template></el-table-column></el-table></div><Edit ref="editRef" @on-Update="getList"/>
</template><style scoped>
.app {width: 980px;margin: 100px auto 0;
}
</style>

edit.vue

<script setup>
// TODO: 编辑
const emit = defineEmits(["on-Update"]);
import { ref } from "vue";
import axios from "axios";
// 弹框开关
const dialogVisible = ref(false);
const from = ref({id: "",name: "",place: "",
});
const open = (row) => {console.log("row", row);from.value.id = row.id;from.value.name = row.name;from.value.place = row.place;dialogVisible.value = true;
};
const onUpdate = async () => {await axios.patch(`/edit/${from.value.id}`, {name: from.value.name,place: from.value.place,});dialogVisible.value = false;emit("on-Update");
};
defineExpose({open,
});
</script><template><el-dialog v-model="dialogVisible" title="编辑" width="400px"><el-form label-width="50px"><el-form-item label="姓名"><el-input v-model="from.name" placeholder="请输入姓名" /></el-form-item><el-form-item label="籍贯"><el-input v-model="from.place" placeholder="请输入籍贯" /></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="onUpdate">确认</el-button></span></template></el-dialog>
</template><style scoped>
.el-input {width: 290px;
}
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

6.2.0在线编辑:GrapeCity Documents for Word (GcWord) Crack

GrapeCity Word 文档 (GcWord) 支持 Office Math 函数以及转换为 MathML GcWord 现在支持在 Word 文档中创建和编辑 Office Math 内容。GcWord 中的 OMath 支持包括完整的 API&#xff0c;可处理科学、数学和通用 Word 文档中广泛使用的数学符号、公式和方程。以下是通过 OMa…

无法在 macOS Ventura 上启动 Multipass

异常信息 ➜ ~ sudo multipass authenticate Please enter passphrase: authenticate failed: Passphrase is not set. Please multipass set local.passphrase with a trusted client. ➜ ~ multipass set local.passphrase Please enter passphrase: Please re-enter…

大语言模型LLM的一些点

LLM发展史 GPT模型是一种自然语言处理模型,使用Transformer来预测下一个单词的概率分布,通过训练在大型文本语料库上学习到的语言模式来生成自然语言文本。 GPT-1(117亿参数),GPT-1有一定的泛化能力。能够用于和监督任务无关的任务中。GPT-2(15亿参数),在生成方面表现出很…

vue自定义指令--动态参数绑定

在企业微信侧边栏应用中&#xff0c;给dialog添加了拖拽功能&#xff0c;但是因为dialog高度超过了页面高度&#xff0c;所以高度100%时拖拽有个bug--自动贴到窗口顶部而且企业侧边栏宽高都有限制&#xff0c;拖拽效果并不理想&#xff0c;所以就想缩小dialog再进行拖拽。 拖拽…

IntelliJ IDEA和Android studio怎么去掉usage和作者提示

截止到目前我已经写了 600多道算法题&#xff0c;其中部分已经整理成了pdf文档&#xff0c;目前总共有1000多页&#xff08;并且还会不断的增加&#xff09;&#xff0c;大家可以免费下载 下载链接&#xff1a;https://pan.baidu.com/s/1hjwK0ZeRxYGB8lIkbKuQgQ 提取码&#xf…

java处理CSV文件

文章目录 1. 方法2. maven依赖3. 示例代码 1. 方法 opencsv–>CSVParser&#xff1b;commons-csv–>CSVReader&#xff1b;有时候文本里有逗号可能会导致错误分割 2. maven依赖 <dependency><groupId>org.apache.commons</groupId><artifactId>…

457. 环形数组是否存在循环

457. 环形数组是否存在循环 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a;经验吸取 原题链接&#xff1a; 457. 环形数组是否存在循环 https://leetcode.cn/problems/circular-array-loop/description/ 完成情况&#xff1a; 解题思路…

使用Pandas进行数据清理的入门示例

数据清理是数据分析过程中的关键步骤&#xff0c;它涉及识别缺失值、重复行、异常值和不正确的数据类型。获得干净可靠的数据对于准确的分析和建模非常重要。 本文将介绍以下6个经常使用的数据清理操作&#xff1a; 检查缺失值、检查重复行、处理离群值、检查所有列的数据类型…

explicit关键字 和 static成员

explicit关键字 和 static成员 1、explicit 关键字2、static成员&#xff08;静态成员变量属于类的&#xff08;只有所属这个类的对象才能修改&#xff09;&#xff0c;不同于全局变量&#xff08;任何对象都能修改&#xff09;&#xff09;2.1 定义和性质2.2 静态成员的使用场…

opencv进阶02-在图像上绘制多种几何图形

OpenCV 提供了方便的绘图功能&#xff0c;使用其中的绘图函数可以绘制直线、矩形、圆、椭圆等多种几何图形&#xff0c;还能在图像中的指定位置添加文字说明。 OpenCV 提供了绘制直线的函数 cv2.line()、绘制矩形的函数 cv2.rectangle()、绘制圆的函数cv2.circle()、绘制椭圆的…

【Quarkus技术系列】「云原生架构体系」在云原生时代下的Java“拯救者”是Quarkus,那云原生是什么呢?

云原生时代下的Java"拯救者" 在云原生时代&#xff0c;其实Java程序是有很大的劣势的&#xff0c;以最流行的spring boot/spring cloud微服务框架为例&#xff0c;启动一个已经优化好&#xff0c;很多bean需要lazy load的application至少需要3-4秒时间&#xff0c;内…

广西一公司泄露22万个人信息,被罚23万

近日&#xff0c;广西北海公安网安部门发现&#xff0c;北海某公司网站存在严重数据泄露问题&#xff0c;约22万个人信息数据已挂在暗网售卖。 经查&#xff0c;涉案公司主要提供网上咨询服务&#xff0c;在日常工作中收集了个人和企业等大量公民信息&#xff0c;但公司存放数…

【算法题】2547. 拆分数组的最小代价

题目&#xff1a; 给你一个整数数组 nums 和一个整数 k 。 将数组拆分成一些非空子数组。拆分的 代价 是每个子数组中的 重要性 之和。 令 trimmed(subarray) 作为子数组的一个特征&#xff0c;其中所有仅出现一次的数字将会被移除。 例如&#xff0c;trimmed([3,1,2,4,3,4…

一站式自动化测试平台-Autotestplat

3.1 自动化平台开发方案 3.1.1 功能需求 3.1.3 开发时间计划 如果是刚入门、但有一点代码基础的测试人员&#xff0c;大概 3 个月能做出演示版(Demo)进行自动化测试&#xff0c;6 个月内胜任开展工作中项目的自动化测试。 如果是有自动化测试基础的测试人员&#xff0c;大概 …

python序列化反序列化和异常处理笔记

迭代器 迭代是访问集合元素的一种方式。迭代器是一个可以记住遍历的位置的对象。迭代器对象从集合的第一个元素开始访问&#xff0c;直到所有的元素被访问完结束。迭代器只能往前不会后退。 1. 可迭代对象 我们已经知道可以对list、tuple、str等类型的数据使用for...in...的…

面试热题(数组中的第K个最大元素)

给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。 输入: [3,2,1,5,6,4] 和 k 2 输出: 5提到数组中最大元素&#xff0c;我们往往想到就是先给数组…

判断自己网络所在的NAT类型

文章目录 各NAT类型介绍软件准备流程 各NAT类型介绍 NAT0: OpenInternet&#xff0c;没有经过NAT地址转换&#xff0c;公网IP NAT1: Full Cone NAT&#xff0c;动态家宽可以达到最优的状态&#xff0c;外网设备可以主动发信息给NAT1网络内的设备。 NAT2: Address-Restricted C…

什么是JavaScript中的柯里化(Currying)和偏函数应用(Partial Application)?它们在JavaScript中有哪些应用场景?

1、什么是JavaScript中的柯里化(Currying)和偏函数应用(Partial Application)&#xff1f;它们在JavaScript中有哪些应用场景&#xff1f; 柯里化&#xff08;Currying&#xff09;和偏函数应用&#xff08;Partial Application&#xff09;是函数式编程中的两个重要概念&…

Mybatis 源码 ④ :TypeHandler

文章目录 一、前言二、DefaultParameterHandler1. DefaultParameterHandler#setParameters1.1 UnknownTypeHandler1.2 自定义 TypeHandler 三、DefaultResultSetHandler1. hasNestedResultMaps2. handleRowValuesForNestedResultMap2.1 resolveDiscriminatedResultMap2.2 creat…

K8S系列二:实战入门

写在前面 本文是K8S系列第二篇&#xff0c;主要面向对K8S新手同学&#xff0c;阅读本文需要读者对K8S的基本概念&#xff0c;比如Pod、Deployment、Service、Namespace等基础概念有所了解。尚且不熟悉的同学推荐先阅读本系列的第一篇文章&#xff1a;《K8S系列一&#xff1a;概…