vue一个页面左边是el-table表格 当点击每条数据时可以在右边界面编辑表格参数,右边保存更新左边表格数据

实现思路:

1.点击当前行通过row拿到当前行数据。

2.将当前行数据传给子组件。

3.子组件监听父组件传过来的数据并映射在界面。

4.点击保存将修改的值传给父组件更新表格。

5.父组件收到修改过后的值,可以通过字段判断比如id,通过 findIndex找到是哪条数据修改了,然后在更新表格数据

table.vue

<template><div><el-button @click="add">新增数据</el-button><el-table :data="tableData" border @cell-click="cellClick"><el-table-column prop="name" label="名称" width="180"></el-table-column><el-table-column prop="age" label="年龄" width="180"></el-table-column><el-table-column prop="gender" label="性别" width="180"></el-table-column><el-table-column label="操作"><template #default="{ row }"><el-button type="primary" @click="edit(row)">编辑</el-button></template></el-table-column></el-table><Boundaryv-if="showEdit":update="person.selectedRow"@updateTable="updateTable"/></div>
</template><script setup>
import { ref, reactive } from "vue";import Boundary from "./Boundary.vue";const tableData = ref([{ name: "张三", age: 18, gender: "男", id: 1 },{ name: "李四", age: 20, gender: "女", id: 2 },
]);
const person = reactive({selectedRow: "",
});
const showEdit = ref(false);
// 点击单行
function cellClick(row) {showEdit.value = true;person.selectedRow = { ...row };
}
// 点击编辑按钮
function edit(row) {showEdit.value = true;person.selectedRow = { ...row };
}
// 点击按钮在表格中新增一条数据,id递增
function add() {tableData.value.push({name: "",age: null,gender: "",id: tableData.value.length + 1,});
}
// 根据id找出索引
function updateTable(newData) {const index = tableData.value.findIndex((item) => item.id === newData.id);tableData.value.splice(index, 1, newData);
}
</script>

Boundary.vue

<template><div><input v-model="person.inputData.name" placeholder="请输入名称" /><input v-model="person.inputData.age" placeholder="请输入年龄" /><input v-model="person.inputData.gender" placeholder="请输入性别" /><el-button type="primary" @click="save">保存</el-button></div>
</template><script setup>
import { ref, reactive, watch } from "vue";
const emits = defineEmits(["updateTable"]);
let props = defineProps({update: {type: Object,default: {},},
});
const person = reactive({inputData: {name: "",age: "",gender: "",id: "",},
});
function save() {emits("updateTable", person.inputData);
}
// 接收表格传过来的数据
person.inputData = props.update;
// 监听父组件传过来的表格数据
watch(() => props.update,(val) => {person.inputData = val;},{ deep: true }
);
</script>

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

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

相关文章

VR Interaction Framework2.0使用

1 按键 &#xff0c;比如按压下手柄的B键 if (InputBridge.Instance.BButtonDown){print("kkkkkkbbbbb456");} 2抓取某个物体&#xff0c;那么就在要抓取的那个物体上加一些组件&#xff0c;特别是Grabble Unity Events

cocos2dx DrawNode

cocos2dx 两种绘图方式 DrawPrimitivesDrawNode DrawPrimitives 3.x 已经弃用 绘制的图形可以是实心的&#xff0c;也可以是空心的。 DrawNode 在一个单独的批处理中绘制了所以元素&#xff0c;因此它绘制点、线段、多边形都要比“drawing primitives”快。 绘制的图形都…

【基础知识】AB软件RSLinx如何实现OPC通讯组态

哈喽&#xff0c;大家好&#xff0c;我是雷工。 在上一节了解了什么是RSLinx&#xff1f;以及RSLinx Lite、RSLinx Classice、RSLinx Professional、RSLinx Gateway几个版本的特点。 本节了解AB的RSLinx如何实现OPC组态。 一、创建RSLinx通讯&#xff1a; 1.1、【Communicati…

excel自己记录

1、清除换行符号 2、添加特殊符号&并清除换行符号 7日&15日&30日&60日 3、判断单元格最后一个字符是不是数字&#xff0c;不是就删掉 IF(ISNUMBER(--RIGHT(B2,1)),B2,SUBSTITUTE(B2,RIGHT(B2,1),"")) ISNUMBER(--RIGHT(B2,1))判断最右边的一个数是否…

Wireshark的捕获过滤器

Wireshark的过滤器&#xff0c;顾名思义&#xff0c;作用是对数据包进行过滤处理。具体过滤器包括捕获过滤器和显示过滤器。本文对捕获过滤器进行分析。 捕获过滤器&#xff1a;当进行数据包捕获时&#xff0c;只有那些满足给定的包含/排除表达式的数据包会被捕获。 捕获过滤器…

一起学docker系列之九docker运行mysql 碰到的各种坑及解决方法

目录 前言1 Docker 运行mysql命令2 坑一&#xff1a;无法读取/etc/mysql/conf.d目录的问题3 坑二&#xff1a;/tmp/ibnr0mis 文件无法创建/写入的问题4 坑三&#xff1a;Navicat 连接错误&#xff08;1045-access denied&#xff09;5 坑四&#xff1a;MySQL 登录失败问题结语 …

ros2文件package.xml与cmakelists.txt比较

每次在ros2里面添加文件以后&#xff0c;都要修改packages.xml,与cmakelists.txt文件。

Vue服务端渲染——同构渲染

Vue.js 可以用于构建客户端应用程序&#xff0c;组件的代码在浏览器中运行&#xff0c;并输出 DOM 元素。同时&#xff0c;Vue.js 还可以在 Node.js 环境中运行&#xff0c;它可以将同样的组件渲染为字符串并发送给浏览器。这实际上描述了 Vue.js 的两种渲染方式&#xff0c;即…

爬虫项目实战:利用基于selenium框架的爬虫模板爬取豆瓣电影Top250

&#x1f44b; Hi, I’m 货又星&#x1f440; I’m interested in …&#x1f331; I’m currently learning …&#x1f49e; I’m looking to collaborate on …&#x1f4eb; How to reach me … README 目录&#xff08;持续更新中&#xff09; 各种错误处理、爬虫实战及模…

Lua实现面向对象三大特性

面向对象是基于table实现的 封装 :(冒号) 自动将调用该函数的对象作为第一个参数传入 --Object就是第一参数 function Object:new() self&#xff1a;代表默认传入的第一个参数 _index&#xff1a;当自己的变量中找不到时&#xff0c;会默认找原表中_index指向的内容 Obj…

AD9361快速开发指南

AD9361是ADI&#xff08;Analog Devices&#xff09;公司推出的一款全集成的RF收发器芯片&#xff0c;广泛应用于无线通信系统&#xff0c;包括基于FPGA和ARM处理器的数码电视&#xff0c;卫星通信&#xff0c;雷达通信&#xff0c;军事通信和工业控制等领域。AD9361提供了广泛…

Qt问题 QString 和 void* 相互转化

QString转为void*格式 //将路径QString转为void*格式QByteArray byteArray qstrFilePath.toUtf8();char* charArray byteArray.data();void* voidPath static_cast<void*>(charArray);void*转为QString格式 char* charPath static_cast<char*>(voidPath); QS…

从 RBAC 到 NGAC ,企业如何实现自动化权限管理?

随着各领域加快向数字化、移动化、互联网化的发展&#xff0c;企业信息环境变得庞大复杂&#xff0c;身份和权限管理面临巨大的挑战。为了满足身份管理法规要求并管理风险&#xff0c;企业必须清点、分析和管理用户的访问权限。如今&#xff0c;越来越多的员工采用移动设备进行…

杰发科技AC7801——Flash模拟EEP内存分布情况

简介 本文记录了在使用AutoChips芯片Flash模拟EEP过程中的一些理解 核心代码如下 #include <stdlib.h> #include "ac780x_sweeprom.h" #include "ac780x_debugout.h"#define SWEEPROM_SIZE (2048UL) /* Ssoftware eeprom size(Byte) */ #define TE…

音视频5、libavformat-2

4、封装 Muxers (封装器)以 AVPacket 的形式获取编码数据并将其写入到指定容器格式的文件或输出字节流中。 muxing过程中最重要的API函数有: avformat_write_header() 用于写入文件header; av_write_frame() / av_interleaved_write_frame() 用于写…

后端跟前端讨论:如何对比分析AB方案?

目录 一、结论 二、场景再现 1、方案说明 2、不同思维的碰撞&#xff08;重点&#xff09; &#xff08;1&#xff09;场景描述 &#xff08;2&#xff09;后端思维 &#xff08;3&#xff09;前端思维 3、我作为后端说一句 一、结论 不是在设置相同条件下进行对比。 …

Excel动态选择某一行/列的最后一个数据

选择列的最后一个数据&#xff1a; 以A列为例&#xff0c;使用&#xff1a; LOOKUP(1,0/(A:A<>""),A:A)选择行的最后一个数据&#xff1a; 以第3行为例&#xff0c;使用&#xff1a; LOOKUP(1,0/(3:3<>""),3:3)示例程序 列最后一个数据&a…

C++右值引用

文章目录 1.左值概念和右值概念1.1.赋值目的1.2.左值右值1.2.1.左值1.2.2.右值 2.左值引用和右值引用2.1.左值引用2.2.右值引用2.2.1.细化参数2.2.2.资源转移2.2.2.1.返回转移2.2.2.2.参数转移 3.万能引用和完美转发3.1.万能引用3.2.完美转发 4.关于const的补充5.类的新成员5.1…

【精选】框架初探篇之——MyBatis的CRUD及配置文件

MyBatis增删改查 MyBatis新增 新增用户 持久层接口添加方法 void add(User user);映射文件添加标签 <insert id"add" parameterType"com.mybatis.pojo.User">insert into user(username,sex,address) values(# {username},# {sex},# {address}) <…

华硕灵耀XPro(UX7602ZM)原装Win11系统恢复安装教程方法

华硕灵耀XPro(UX7602ZM)原装Win11系统恢复安装教程方法&#xff1a; 第一步&#xff1a;需要自备华硕6个底包工厂安装包&#xff08;EDN.KIT.OFS.SWP.HDI.TLK&#xff09;或者自己备份的iso/esd/wim等镜像恢复 支持系列&#xff1a; 灵耀系列原装系统 无畏系列原装系统 枪…