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

news/2024/11/25 2:41:14/

目的: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.ppmy.cn/news/1219567.html

相关文章

继承、多态

复习 需求&#xff1a; 编写一个抽象类&#xff1a;职员Employee,其中定义showSalary(int s)抽象方法&#xff1b;编写Employee的子类&#xff0c;分别是销售员Sales和经理Manager,分别在子类中实现对父类抽象方法的重写&#xff0c;并编写测试类Test查看输出结果 package cn.…

js 深度学习(六)

立即执行函数 immediate invoked function expression 自动执行 执行完成后立即释放 (function(){var a 1,b2;console.log(ab) }()) // w3c建议 (function(a,b){return ab; })(a,b); // 可以加参数 可以有返回值表达式才能被执行符号执行&#xff0c;被小括号包裹的是表达式…

Linux实战一天一个小指令--《文件管理/文件查找》

阿丹&#xff1a; 作为一个java程序员进行实战开发不接触linux操作系统基本上是不可能的&#xff0c;所以这个专题就出现了&#xff0c;本文章重点解决大家关于文件管理以及文件查找查看的疑惑。我将采用语法基础用法并在下面进行高级语法的总结使用&#xff0c;方便大家学习和…

自动备份pgsql数据库

bat文件中的内容&#xff1a; PATH D:\Program Files\PostgreSQL\13\bin;D:\Program Files\7-Zip set PGPASSWORD**** pg_dump -h 8.134.151.187 -p 5466 -U sky -d mip_db --schema-only -f D:\DB\backup\%TODAY%-schema-mip_db_ali.sql pg_dump -h 8.134.151.187 -p 5466…

react hook ts 实现 列表的滚动分页加载,多参数混合混合搜索

InfiniteScroll 的组件见&#xff1a; https://blog.csdn.net/Zhooson/article/details/134396945 search.tsx 页面 import { FC, useEffect, useState } from react import InfiniteScroll from ../../components/InfiniteScrollconst tabs [{id: 1,title: tab-1,index: 1…

nvm下载安装以及配置

1. nvm下载 nvm各版本下载链接&#xff1a;Releases coreybutler/nvm-windows GitHub 建议下载安装版的&#xff0c;非安装版还需要额外配置环境变量。 2. nvm安装 注意&#xff1a;在安装 NVM for Windows 之前卸载任何现有版本的 Node.js&#xff08;否则你会遇到版本冲突…

excel在函数中插入函数

例如&#xff0c;要计算RAND()1的值&#xff0c;其中RAND()表示取0~1之间的随机数。 插入-》函数&#xff1a; 选SUM函数&#xff1a; 点击“继续”&#xff1a; 将光标先放在数字1中的输入框中&#xff0c;然后在左边过滤出RAND函数&#xff0c;并且点击继续&#xff1…

浅了解下:运营商大数据如何挖掘电销同行网站,APP,精准获客 ?

今天我们要讲的是运营商精准大数据营销。运营商精准大数据营销只是精准营销的一种&#xff0c;精准营销筛选包含了电话营销这个词。那么电话营销如何通过运营商大数据找到精准的客户&#xff1f;电销如何通过大数据找到准确的客户来源&#xff1f; 在全网时代&#xff0c;大数…