table表格的某一行数据如何回填

目的:table表格的某一行数据的输入框按钮触发对话框,对话框选择的数据再回填到table表格的这一行中。

1.插槽中传递本行的index: v-slot="{ row, $index }"

2.点击事件或者change事件传递index: @click="val => tpmClicked($index)"

3. 记录这个index值: 

const rowIndexTPM = ref<number>();
const tpmClicked = async index => {rowIndexTPM.value = index;dialogTPMVisible.value = true;
};

4. 对话框选择后触发事件,使用这个index值:

const TPMchangeInfo = (jobNumber: string) => {requireList.value[rowIndexTPM.value].JobNumber = jobNumber;dialogTPMVisible.value = false;changeInfo(requireList.value[rowIndexTPM.value]);
};

代码数据:

1. 记录index<el-table-column label="工号" prop="JobNumber"><template v-slot="{ row, $index }"><span v-if="editStatus"><el-inputtype="text"v-model="row.JobNumber"placeholder="请输入:"@change="val => changeInfo(row)"><template #suffix v-if="row.WorkerRole == 'TPM'"><el-buttontype="primary"@click="val => tpmClicked($index)"v-if="row.WorkerRole == 'TPM'"link><el-icon><Connection /></el-icon></el-button></template></el-input></span><span v-else>{{ row.JobNumber }}</span></template></el-table-column>-->  触发的事件:
const rowIndexTPM = ref<number>();
const tpmClicked = async index => {rowIndexTPM.value = index;dialogTPMVisible.value = true;
};2.对话框:
<el-dialog v-model="dialogTPMVisible" title="请选择TPM工号" width="20%"><el-tree-selectv-model="Value":data="TPMListInfo"filterableplaceholder="请输入:"@change="val => TPMchangeInfo(val)"/></el-dialog>--> 事件触发:
const TPMchangeInfo = (jobNumber: string) => {requireList.value[rowIndexTPM.value].JobNumber = jobNumber;dialogTPMVisible.value = false;changeInfo(requireList.value[rowIndexTPM.value]);
};--> 数据源:
const TPMListInfo = computed(() => {console.log("data houduan: ", props.TPMGroups);return props.TPMGroups.map(item => {return {value: "",label: item.DepName,children: item.TPMList.map(t => {return {value: t.JobNumber,label: t.WorkerName + "/" + t.JobNumber,children: []};})};});
});

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

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

相关文章

一张图搞懂什么是BCD8421编码

如图所示 BCD8421编码的意义是 用四位二进制数表达一位的十进制数 因此十进制下的0&#xff5e;9在BCD8421编码下与其二进制表达是一样的 而多位的十进制数 比如说“10” 则需要将它拆分成两个单独的数“1”和“0” 分别用BCD8421编码表示这两个数 十进制“1” -> 0001 十进…

JAVA基础7:数组

1.数组定义格式 1&#xff09;数组概述 一次性声明大量的用于存储数据的变量 要存储的数据通常都是同类型数据&#xff0c;比如&#xff1a;考试成绩 数组&#xff08;array)是一种用于存储多个相同类型数据的存储模型 2&#xff09;数组定义格式 格式一&#xff1a;数据类…

在虚拟环境中pip包不在虚拟环境里

这里写自定义目录标题 结合网上多个大佬的方法终于解决了. 首先修改自己虚拟环境目录下的site文件: vim /home/XXX/.conda/envs/XXX/lib/pythonXXX/site.py 把 USER_BASE 和 USER_SITE 改成虚拟环境目录. USER_BASE: ‘/home/XXX/.conda/envs/XXX’ (exists) USER_SITE: ‘/ho…

内衣洗衣机和手洗哪个干净?好用的内衣洗衣机推荐

在日常生活中&#xff0c;我们的衣服不可避免地会沾染上各种细菌、毛发和污渍&#xff0c;将它们与贴身衣物混合清洗&#xff0c;很容易发生交叉感染&#xff0c;而被感染后&#xff0c;贴身衣物也有可能导致我们人体引起皮肤病。这也是为什么大部分人都喜欢用手洗的原因&#…

c# 和 c++ 匿名互相传递参数

在C#和C之间进行匿名参数传递需要使用Interop服务。下面是一个示例&#xff0c;展示了如何在C#和C之间传递匿名参数&#xff1a; 在C#中&#xff1a; using System; using System.Runtime.InteropServices;// 定义C中的匿名函数签名 [UnmanagedFunctionPointer(CallingConven…

@CacheInvalidate(name = “xxx“, key = “#results.![a+b]“,multi = true)是什么意思

@CacheInvalidate 注解是 JetCache 框架提供的注解,它是由阿里巴巴开源的组织 Alibaba Group 开发和维护的。JetCache 是一款基于注解的缓存框架,提供了丰富的缓存功能和灵活的配置选项,可用于增强应用程序的性能和可扩展性。JetCache 支持多种缓存后端,包括内存缓存、Redi…

矩阵的除法

B/A 如果矩阵A可逆&#xff0c;那么 证明&#xff1a; A/AB 如果矩阵A和B都可逆&#xff0c;那么 证明&#xff1a;

基于回溯搜索算法优化概率神经网络PNN的分类预测 - 附代码

基于回溯搜索算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于回溯搜索算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于回溯搜索优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神…

优雅的Java编程:将接口对象作为方法参数

theme: smartblue 目录 概述 在Java编程中&#xff0c;方法的参数传递方式通常是通过基本类型、对象引用或者集合等方式。然而&#xff0c;一种更加优雅且灵活的设计模式是将接口对象作为方法的参数。这种方式为我们带来了许多好处&#xff0c;包括降低耦合性、实现多态性和可…

Jenkins 构建CICD

GitLab GitLab安装 https://gitlab.cn/install/?versionce CentOS 下安装 1. 安装和配置必须的依赖项 在 CentOS 7上&#xff0c;下面的命令也会在系统防火墙中打开 HTTP、HTTPS 和 SSH 访问。这是一个可选步骤&#xff0c;如果您打算仅从本地网络访问极狐GitLab&#xf…

Java集合(全)

Java提供了多种集合框架类&#xff0c;每种都有不同的特性和用途。以下是Java中常见的集合类&#xff1a; 1、List&#xff08;列表&#xff09;: ArrayList ArrayList 是 Java 集合框架中的一个常用类&#xff0c;实现了动态数组的数据结构。与传统的数组相比&#xff0c;A…

【现场问题】datax中write部分为Oracle的时候插入clolb类型字段,插入的数据为string且长度过场问题

datax的Oraclewriter 报错显示查询报错展示查找datax中的数据插入模块 报错显示 occurred during batching: ORA-01704: string literal too long 查询报错展示 基本上查到的都是这样的&#xff0c;所以锁定是clob的字段类型的问题&#xff0c;而且是只有Oracle出问题&#…

觉非科技发布【轻地图高速NOA智驾方案】|地平线,觉非科技,MobileDrive超捷生态协作实现技术落地

11月10日&#xff0c;2023世界新汽车技术合作生态展期间&#xff0c;觉非科技正式发布了基于地平线征程系列以及MobileDrive超捷规控系统的【轻地图高速NOA智驾解决方案】。该方案首次实现了从芯片能力输出、到数据闭环建设、再到规控部署的产业生态链协作与打通&#xff0c;为…

docker部署容器化mysql5.7

部署MySQL 本教程将指导您如何在Docker环境中部署MySQL数据库&#xff0c;并展示如何通过外部MySQL客户端与之交互。 步骤 1: 准备环境 首先&#xff0c;我们需要在本地环境中创建必要的文件夹结构来存储MySQL的配置、日志和数据。 # 在终端创建mysql文件夹及其子文件夹 mk…

微信小程序漏洞之accesskey泄露

更新时间&#xff1a;2023年09月08日09:42:52 1. Accesskey泄露漏洞 这篇文章里面都是以我个人的视角来进行的&#xff0c;因为一些原因&#xff0c;中间删了一些东西&#xff0c;肯定有很多不正确的地方&#xff0c;希望大家能理解&#xff0c;也能指正其中的错误。 在以前…

VCR库代码示例

1. 首先&#xff0c;我们需要在代码中添加对VCR库的引用&#xff1a; ruby require vcr require rest-client 2. 然后&#xff0c;我们需要创建一个VCR录制器&#xff0c;以便我们可以记录实际的HTTP请求和响应&#xff1a; ruby VCR.use_cassette(download_video, record:…

虚拟机CentOS 8 重启后不能上网

情况说明&#xff1a;原本虚拟机是可以上网的&#xff0c;然后嘚一下&#xff0c;重启后&#xff0c;连接不上网络&#xff0c;完了&#xff0c;上网查找一堆质料&#xff0c;我的连接方式是桥接模式&#xff08;复制物理网络连接状态&#xff09;。 好&#xff0c;有人说是vmn…

@Validated和@Valid 区别

Spring Validation验证框架对参数的验证机制提供了Validated&#xff08;Spring’s JSR-303规范&#xff0c;是标准JSR-303的一个变种&#xff09;&#xff0c;javax提供了Valid&#xff08;标准JSR-303规范&#xff09;&#xff0c; 配合BindingResult可以直接提供参数验证结…

通配符SSL证书

通配符SSL证书是一种特殊的数字证书&#xff0c;用于在互联网上建立安全的连接&#xff0c;其特点是可以保护多个子域名&#xff0c;并且具有很高的兼容性和扩展性。本文将详细介绍通配符SSL证书的相关概念、优点和应用等。 首先&#xff0c;我们需要了解什么是SSL证书。 SSL证…

未整理的知识链接

【scala】下划线用法总结 【scala】下划线用法总结_scala 下划线-CSDN博客 Spark Sql Row 的解析 Spark Sql Row 的解析 - 简书 spark dataframe foreach spark dataframe foreach_mob64ca12f0cf8f的技术博客_51CTO博客 spark- Dataframe基本操作-查询 https://blog.csdn.n…