Vue中如何只传递一个人员Name同时把人员Id也传递过去

news2025/2/21 21:33:36

前言:

        根据项目需求,在修改功能中,要求展示一个人员的下拉框,但是又要把人员ID在点击提交时传递过去,一般这种情况有2种解决方法:一是 通过map遍历匹配;二是 在选中人员时将人员ID获取到,通过filter方法

 


大纲:


实例: 

重点代码:

        obj: {
          receiver:''
        },
        objOption: {
          column: [{
              label: 'XX号',
              prop: 'xxNo',
            }, {
              label: 'XX人',
              prop: 'xxman',
            }, {
              label: '报修内容',
              prop: 'content',
              disabled: true
            }, {
              label: '部门',
              prop: 'dept',
              formslot: true,
            }, {
              label: '接单人',
              prop: 'receiverId',
              type: 'select',
              props: {
                label: 'staffName',
                value: 'staffId'
              },
              dicData: [],
              rules: [{
                required: true,
                message: "请选择接单人",
                trigger: "blur"
              }],
            }
          ]
        },

     submit() {
        //map遍历匹配
        this.objOption.column[4].dicData.map(item=>{
          if(item.staffId == this.obj.receiverId){
            this.obj.receiver = item.staffName
          }
          console.log('数据:',this.obj.receiver)
        })
        let params = {
          orderIds: [this.obj.orderId],
          receiverId: this.obj.receiverId,
          receiver: this.obj.receiver,
        };
        console.log('派单params:',params)
        API.workOrder(params).then(res => {
          if (res.data.code === 0) {
            this.$message({
              type: 'success',
              message: res.data.data
            });
            this.onLoad();
          } else {
            this.$message({
              type: 'error',
              message: res.data.data
            });
            this.onLoad();
          }
        });
      },

dicData:[] 在Vue中通常表示一个空的字典数据数组,用于存储键值对(存储字典数据)

所谓字典数据,就是一些键值对的集合,例如:物品分类和分类名称的对应关系等。在开发过程中,我们经常需要使用这些字典数据进行数据展示、筛选和数据绑定等操作。而将字典数据保存在数组中,可以方便进行遍历、查询和修改。

this.objOption.column[4].dicData.map     获取到objOption中下标为4的数据信息进行map遍历匹配

if(item.staffId == this.obj.receiverId){ this.obj.receiver = item.staffName}

如果选中的接单人receiverId等等于staffId,那么就通过item.staffName 获取到接单人的姓名,同时也将接单人Id传递过去;

打印数据展示:

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

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

相关文章

编辑和校对魔法:让文字焕发生机的秘诀

编辑和校对是写作过程中的关键环节,可以让你的文字更加精炼、清晰、引人入胜。以下是一些编辑和校对的秘诀,可以让你的文字焕发生机。 1.保持客观 从读者的角度审视文章,保持客观和中立。确保内容清晰、观点明确,同时避免主观情感…

运筹系列81:LKH代码分析

1. 基本数据结构 基础的node定义在LKH.h中 用于2-level tree的segment定义如下: LKH可以使用3种数据结构,默认是2-level tree: 2-level tree的flip操作(即2-opt算子),在Flip_SL.c中,特殊的地…

请问python如何处理url带有“?”参数的接口?

在Python中处理带有"?"参数的URL接口,可以使用urllib.parse库中的urlencode()函数来进行编码。以下是一些示例代码 如果你想学习自动化测试,我这边给你推荐一套视频,这个视频可以说是B站百万播放全网第一的自动化测试教程&#x…

详解python排序的5种高级用法

来源:投稿 作者:Fairy 编辑:学姐 排序是编程中常用的操作之一。Python提供了多种排序方法,可以适用于不同的排序需求。 那么,今天我们将介绍Python中常用的 5 种列表排序方法。 「1.使用sorted()函数和lambda表达式」…

常见的JS存储方式及其特点

在前端开发中,经常需要在浏览器端存储和管理数据。为了实现数据的持久化存储和方便的访问,JavaScript提供了多种数据存储方式。本文将介绍几种常见的前端JS数据存储方式及其特点。 1. Cookie Cookie是一种小型的文本文件,由浏览器保存在用户…

VMware Workstation下载与安装(适用于在官网注册好账号的朋友,许可证秘钥请自行网上搜索获取)

一、VMware Workstation下载 第一步:点击下方“Resources”链接,进入Vmware官网(本教程适用于已经在官网注册好账号并已经进行登陆的朋友): Resources 第二步:点击“Product Downloads”,进入…

GIT分支管理(随笔)

目录 前言 一、概念原理 1、分支 2、原理 说明1: 说明2: 二、分支操作 1、查看分支 2、创建分支 3、切换分支 4、删除分支 5、合并分支 6、合并冲突 7、重命名分支 8、编制分支的介绍 三、标签 1、概念 2、操作 总结 前言 分支&#xff0…

C语言---关键字static的初步剖析

🚀write in front🚀 📝个人主页:认真写博客的夏目浅石. 🎁欢迎各位→点赞👍 收藏⭐️ 留言📝 📣系列专栏:凡人修C传 💬总结:希望你看完之后&…

数据结构--队列2--双端队列--java双端队列

介绍 双端队列&#xff0c;和前面学的队列和栈的区别在于双端队列2端都可以进行增删&#xff0c;其他2个都是只能一端可以增/删。 实现 链表 因为2端都需要可以操作所以我们使用双向链表 我们也需要一共头节点 所以节点设置 static class Node<E>{E value;Node<E…

优化设备管理,提升企业效益——工程设备管理模板的实用价值分析

随着建筑行业的不断发展&#xff0c;建筑企业在施工过程中的各种设备也越来越多&#xff0c;设备的管理已经成为建筑企业发展过程中必须要面对的一个问题。作为低代码开发平台&#xff0c;百数根据建筑业的实际需求搭建了一款工程设备管理系统&#xff0c;从而能够让建筑行业企…

图漾相机—windows- Python SDK(官网下载编译)

文章目录 一、 安装依赖&#xff1a;二. 下载swig和SDK&#xff1a;swig下载连接&#xff1a;[https://www.swig.org/](https://www.swig.org/)下载python SDK下载 Windows Camport3 SDK 三、配置python和swig环境变量编译前&#xff0c;请先&#xff1a;安装 Python。 安装 Nu…

智慧垃圾焚烧发电厂Web3D可视化管理系统

前言 随着我国生产力的飞速发展和经济的迅速崛起&#xff0c;城市生活垃圾作为一种生物质能&#xff0c;将其燃烧用于发电&#xff0c;可以有效节约化石能源。 建设背景 随着城镇化进程加速、人民生活水平持续提升,城市生活垃圾产生量也在逐年增长。生活垃圾是“放错地方的资…

Kuboard

安装 Kuboard 之前&#xff0c;假设&#xff1a; 您已经准备好了一个 Linux 服务器用于安装 Kuboard-V3&#xff0c;并且该机器上的 docker 版本不低于 19.03用于安装 Kuboard v3.x 的机器已经安装了 docker&#xff0c;并且版本不低于 docker 19.03您已经有自己的 Kubernetes…

XXL-JOB任务分片

文章目录 任务类型任务配置路由策略阻塞处理策略&#xff1a; 单个任务和集群任务单机多任务分片集群分片 任务类型 单个任务&#xff1a;一个任务实例便可完成 单机单任务&#xff1a;单机模式下任何路由模式都只有一个实例执行 集群单任务&#xff1a;由路由策略(广播模式除…

接口自动化测试之Fiddler的运用

1.接口介绍&#xff08;基础部分&#xff09; 接口是一种用来定义程序的协议&#xff0c;它描述可属于任何类或结构的一组相关行为应用程序编程接口&#xff0c;它是一些预先定义的函数&#xff0c;目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力接口测…

开源项目合集....

likeshop开源商城系统&#xff0c;公众号商城、H5商城、微信小程序商城、抖音小程序商城、字节小程序商城、头条小程序商城、安卓App商城、苹果App商城代码全开源&#xff0c;免费商用。 适用场景&#xff1a;B2C商城、新零售商城、社交电商商城、分销系统商城、小程序商城、商…

Go单元测试及框架使用

Go自带测试框架 单元测试 建议Go 语言推荐测试文件和源代码文件放在一块&#xff0c;测试文件以 _test.go 结尾。函数名必须以 Test 开头&#xff0c;后面一般跟待测试的函数名参数为 t *testing.T 简单测试用例定义如下&#xff1a; func TestXXXX(t *testing.T) {// ...}…

城市NOA转向BEV,头部Tier 1如何笑傲江湖?

主讲&#xff5c;蒋沁宏 编辑&#xff5c;Amy 编者注&#xff1a; 本文是HiEV出品的系列直播「硬核拆解BEV」第三期问答环节内容整理。商汤绝影量产行车智能驾驶研发负责人蒋沁宏&#xff0c;与连线嘉宾寒武纪行歌自动驾驶总监李想、宏景智驾高级工程经理柴可宁、主持嘉宾周琳…

SpringBoot 源码分析初始化应用上下文(1)-createApplicationContext

前言&#xff1a;springBoot的版本是 2.2.4.RELEASE 一、入口 /*** Run the Spring application, creating and refreshing a new* {link ApplicationContext}.* param args the application arguments (usually passed from a Java main method)* return a running {link A…

2023最新版Java 面试突击手册开源(涵盖 p5-p8 技术栈)

前言: 本文收集整理了各大厂常见面试题N道&#xff0c;你想要的这里都有内容涵盖&#xff1a;Java、MyBatis、ZooKeeper、Dubbo、Elasticsearch、Memcached、Redis、MySQL、Spring、Spring Boot、Spring Cloud、RabbitMQ、Kafka、Linux 等技术栈&#xff0c;希望大家都能找到适…