el-select获取id和name

         一般选中节点只会返回:value绑定的数据给v-model中,要想获取id和name一并传给后端,需要如下几步:

        1、给选择框添加点击事件 @input="selectChangeParent" 

        2、v-for中多添加一个参数 index

<el-select v-model="inputForm.projectId" filterable placeholder="请选择"         @input="selectChangeParent"><el-optionv-for="(item, index) in projectInfo":key="item.id":label="item.name":value="item.id"></el-option>
</el-select>

        3、添加选择框点击事件的方法 

          selectChangeParent(index){let listData=[];listData = this.projectInfo;for (let i = 0; i <listData.length ; i++) {if ( listData[i].id==this.inputForm.projectId){this.inputForm.projectName=listData[i].name}}},

        这是我在data中下拉框的数据结构 

                projectInfo: {id: '',name: ''},

         总体思路,点击事件触发时获取到点击的id后,再和v-for绑定的数组做对比,对比时projectInfo的id和点击选择的id相同时,给inputForm里的对象赋值

完整代码:

<%
layout("/include/_vue_body.html", {title:"列表", parent:"隐患处理"}){
%>
<style>body {background: #ffffff !important;}
</style>
<div id="app" class="bg-white"><el-form :model="inputForm" size="small" ref="inputForm" v-loading="loading"label-width="120px"><el-row :gutter="15"><el-col :span="12"><el-form-item label="隐患名称" prop="hiddenName":rules="[{required: true, message:'隐患名称不能为空', trigger:'blur'}]"><el-input v-model="inputForm.hiddenName" placeholder="请填写隐患名称" maxlength="25"></el-input></el-form-item></el-col><el-col :span="12"><el-form-item label="整改措施" prop="hiddenMeasurId":rules="[]"><el-select v-model="inputForm.hiddenMeasurId" filterable placeholder="请选择"><el-optionv-for="item in hiddenMeasureList":key="item.id":label="item.measureName":value="item.id"></el-option></el-select></el-form-item></el-col><el-col :span="12"><el-form-item label="整改负责人" prop="principal":rules="[]"><fs-user-select:is_layer="true":limit="1":value="inputForm.principal"@get-value="(value) => { inputForm.principal = value}"></fs-user-select></el-form-item></el-col><el-col :span="12"><el-form-item label="整改监督人" prop="supervision":rules="[]"><fs-user-select:is_layer="true":limit="1":value="inputForm.supervision"@get-value="(value) => { inputForm.supervision = value}"></fs-user-select></el-form-item></el-col><el-col :span="12"><el-form-item label="隐患类型" prop="hiddenType":rules="[]"><el-select v-model="hiddenType" @change="selectProjectType"><el-option v-for="item in hiddenTypeList" :key="item.value" :label="item.label":value="item.value"></el-option></el-select></el-form-item></el-col><el-col :span="12"><el-form-item label="所属项目" prop="projectId":rules="[]"><el-select v-model="inputForm.projectId" filterable placeholder="请选择" @input="selectChangeParent"><el-optionv-for="(item, index) in projectInfo":key="item.id":label="item.name":value="item.id"></el-option></el-select></el-form-item></el-col><el-col :span="24"><el-form-item label="隐患地点" prop="address":rules="[]"><el-input v-model="inputForm.address" placeholder="请填写隐患地点" maxlength="64"show-word-limit></el-input></el-form-item></el-col><el-col :span="24"><el-form-item label="隐患详情" prop="hiddenDetail":rules="[]"><el-input :rows="6" type="textarea" v-model="inputForm.hiddenDetail" placeholder="请填写隐患详情"maxlength="200" show-word-limit></el-input></el-form-item></el-col><el-col :span="12"><el-form-item label="隐患图片" prop="hiddenUrl":rules="[]"><fs-upload-imgs v-model="inputForm.hiddenUrl"></fs-upload-imgs></el-form-item></el-col></el-row></el-form>
</div>
<script>var formContainer = new Vue({el: '#app',mixins: [sharpMixin],data() {return {loading: false,inputForm: {id: '${hiddenInfo.id}',hiddenName: '',principal: '',supervision: '',hiddenUrl: '',hiddenDetail: '',address: '',projectId: '',hiddenMeasurId: '',projectType: '',projectName:'',hiddenMeasurName: ''},hiddenType: '',hiddenTypeList: [],projectInfo: {id: '',name: ''},hiddenMeasure:{id: '',measureName: '',},hiddenMeasureList:[]}},created() {let that = thisthis.clearForm(function () {if (that.inputForm.id != '') {that.loadData()}});this.hiddenTypeList = this.getDictList("hidden_type")this.initHiddenMeasure()},methods: {loadData() {this.loading = truethis.get('${ctx}/safety/hiddenInfo/info', {id: this.inputForm.id}).then((res) => {if (res.data) {this.inputForm = res.datathis.hiddenType = this.inputForm.projectType}this.initBasicData()this.selectProjectType()this.loading = false})},selectChangeParent(index){let listData=[];listData = this.projectInfo;for (let i = 0; i <listData.length ; i++) {if ( listData[i].id==this.inputForm.projectId){this.inputForm.projectName=listData[i].name}}},initBasicData() {let initData = {}Object.assign(this.inputForm, initData);},initHiddenMeasure(){this.get('${ctx}/safety/hiddenMeasure/hiddenList').then((res) => {if (res.data) {this.hiddenMeasureList = res.data}})},initProjectData(type) {this.get('${ctx}/safety/hiddenInfo/findProjectInfo?type=' + type).then((res) => {if (res.data) {this.projectInfo = res.data}})},initBuildData(type) {this.get('${ctx}/safety/hiddenInfo/findProjectInfo?type=' + type).then((res) => {if (res.data) {this.projectInfo = res.data}})},initRoomData(type) {this.get('${ctx}/safety/hiddenInfo/findProjectInfo?type=' + type).then((res) => {if (res.data) {this.projectInfo = res.data}})},selectProjectType() {this.inputForm.projectType = this.hiddenTypelet type = this.inputForm.projectTypeif (this.hiddenType == 1) {//hiddenType为1时查询在建项目信息this.projectInfo = ''this.initProjectData(type)} else if (this.hiddenType == 2) {//hiddenType为2时查询建筑物信息this.projectInfo = ''this.initBuildData(type)} else {//hiddenType为3时查询房屋信息this.projectInfo = ''this.initRoomData(type)}},clearForm(call) {let that = thissetTimeout(function () {that.$refs['inputForm'].resetFields();if (call) {call();}}, 300)},// 提交doSubmit(call) {this.$refs['inputForm'].validate((valid) => {if (valid) {this.post('${ctx}/safety/hiddenInfo/save', this.inputForm).then((res) => {if (res.success) {this.$message.success(res.msg)call()} else {this.$message.error(res.msg)}})} else {return false;}})}}})
</script>
<% } %>

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

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

相关文章

Doris:StreamLoad导入数据

目录 1.基本原理 2.支持数据格式 3.StreamLoad语法 3.1.请求参数 3.2.返回参数 4.StreamLoad实践 4.1.使用 curl命令 4.2.使用Java代码 Stream load 是一个同步的导入方式&#xff0c;用户通过发送 HTTP 协议发送请求将本地文件或数据流导入到 Doris 中。Stream load 主…

在k8s中,etcd有什么作用?

在Kubernetes&#xff08;K8s&#xff09;中&#xff0c;etcd 是一个关键的组件&#xff0c;它扮演着集群状态存储的角色&#xff0c;具有以下作用&#xff1a; 分布式键值存储&#xff1a;etcd 是一个分布式键值存储系统&#xff0c;用于存储整个 Kubernetes 集群的配置信息、…

Linux虚拟网络设备之bridge

继前两篇介绍了tun/tap和veth之后&#xff0c;本篇将介绍Linux下常用的一种虚拟网络设备&#xff0c;那就是bridge(桥)。 Linux ip netns 命令-CSDN博客 veth-pair,netns-CSDN博客 图解几个与Linux网络虚拟化相关的虚拟网卡-VETH/MACVLAN/MACVTAP/IPVLAN_veth 转发 有拷贝-…

免费记课时小程序-全优学堂

1. 教师使用小程序记上课 使用步骤 创建了员工账号&#xff0c;员工需设置为教师为班级进行排课使用系统账号绑定小程序&#xff0c;记上课 #1.1 创建员工账号 通过系统菜单’机构设置->员工管理‘&#xff0c;添加本机构教师及其他员工。 添加过程中&#xff0c;可设置…

ffmpeg mp3截取命令,视频与mp3合成带音频视频命令

从00:00:03.500开始截取往后长度到结尾的mp3音频&#xff08;这个更有用&#xff0c;测试好用&#xff09; ffmpeg -i d:/c.mp3 -ss 00:00:03.500 d:/output.mp3 将两个音频合并成一个音频&#xff08;测试好用&#xff09; ffmpeg -i "concat:d:/c.mp3|d:/output.mp3&…

CSS3设计动画样式

CSS3动画包括过渡动画和关键帧动画&#xff0c;它们主要通过改变CSS属性值来模拟实现。我将详细介绍Transform、Transitions和Animations 3大功能模块&#xff0c;其中Transform实现对网页对象的变形操作&#xff0c;Transitions实现CSS属性过渡变化&#xff0c;Animations实现…

Git复制代码

目录 一、常用下载代码 1.登录Git克隆SSH​编辑 2.新建文件然后右键点击Git Bash Here 3.git clone Paste 二. 本地下载 1.从本地进入页面 2.生成代码——>导入——>生成代码后下载 3.解压道相应位置 一、常用下载代码 1.登录Git克隆SSH 2.新建文件然后右键点击…

C# list<T>去重

文章目录 C# list<T>去重值类型去重List<object>object is intobject is decimalobject is charobject is boolobject is string List<int>List<string> 引用类型去重 C# list去重 值类型去重 List object is int //object is intList<object&g…

图像二值化阈值调整——cv2.threshold方法

二值化阈值调整&#xff1a;调整是指在进行图像二值化处理时&#xff0c;调整阈值的过程。阈值决定了将图像中的像素分为黑色和白色的界限&#xff0c;大于阈值的像素被设置为白色&#xff0c;小于等于阈值的像素被设置为黑色。 首先画出灰度直方图&#xff1a;横坐标是灰度值…

LeetCode80. 删除有序数组中的重复项 II(JavaScript版)

LeetCode题目链接 题目描述&#xff1a;给你一个有序数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使得出现次数超过两次的元素只出现两次 &#xff0c;返回删除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须在 原地 修改输入数组 并在使用 …

制造行业数字化运维破局之道

项目背景 某大型汽车制造集团&#xff0c;致力于通过数字化、智能化运营手段为用户提升提供高品质的汽车产品和服务。IT部门不仅为内外部持续提供服务&#xff0c;同时为业务运营与核心系统运行提供重要支撑。数字化运维作为数字化转型的核心基础&#xff0c;不但要保障数据安…

3D网页游戏外包开发引擎

3D网页开发引擎是用于创建具有三维图形、虚拟现实和交互性的网页应用程序的工具。以下是一些常用的3D网页开发引擎以及它们的主要特点&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.Three.js&…

这道经典SQL面试问题你会吗?

大家经常自嘲后端开发就是crud boy嘛&#xff0c;今天给大家看一道SQL题&#xff0c;我相信很多人写不出来。我们来看一下这个题目。 create table course (id int primary key,name varchar(32) not null ); create table student (id int primary key,name varchar(32) not …

使用 Curl 和 DomCrawler 下载抖音视频链接并存储到指定文件夹

项目需求 假设我们需要从抖音平台上下载一些特定的视频&#xff0c;以便进行分析、编辑或其他用途。为了实现这个目标&#xff0c;我们需要编写一个爬虫程序来获取抖音视频的链接&#xff0c;并将其保存到本地文件夹中。 目标分析 在开始编写爬虫之前&#xff0c;我们需要了…

Redis Twemproxy 集群,水平扩展 ,扩容方案

文章目录 一、概述二、Twemproxy 分布模式三、测试规划四、Redis 服务实例准备4.1 配置Redis实例4.2 创建关资源4.3 启动Redis服务实例 五、Twemproxy 安装准备六、Twemproxy 安装及集群配置6.1 安装 Twemproxy6.2 配置 Twemproxy6.3 启动 twemproxy6.4 测试 twemproxy 集群 如…

如何使用 NFTScan NFT API 在 Polygon 网络上开发 Web3 应用

Polygon 以前被称为 Matic Network&#xff0c;是一种扩展的解决方案&#xff0c;它提供多种工具来加快并降低区块链网络上交易的成本和复杂性。然而&#xff0c;其区块链上的大量活动使以太坊因增长的传输成本和拥挤的流量几乎瘫痪。Polygon 诞生的主要目的是帮助以太坊解决链…

Docker学习——①

文章目录 1、什么是虚拟化、容器化&#xff1f;2、为什么要虚拟化、容器化&#xff1f;3、虚拟化实现方式3.1 应用程序执行环境分层3.2 虚拟化常见类别3.3 常见虚拟化实现3.3.1 主机虚拟化(虚拟机)实现3.3.2 容器虚拟化实现3.3.3 空间隔离实战--基础知识3.3.4 PID 隔离3.3.5 Mo…

批量导出 PPT的备注到一个txt文本中

使用宏&#xff08;Macro&#xff09;功能&#xff08;适用于 Windows 平台&#xff09; 打开 PowerPoint 幻灯片&#xff0c;并确保每个幻灯片上都添加了备注。 启用"开发人员"选项卡&#xff1a; 如果您已经看到 PowerPoint 的"开发人员"选项卡&#x…

springboot+vue基于Hadoop短视频流量数据分析与可视化系统的设计与实现【内含源码+文档+部署教程】

博主介绍&#xff1a;✌全网粉丝10W,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业毕业设计项目实战6年之久&#xff0c;选择我们就是选择放心、选择安心毕业✌ &#x1f345;由于篇幅限制&#xff0c;想要获取完整文章或者源码&#xff0c;或者代做&am…

HarmonyOS(二)—— 初识ArkTS开发语言(中)之ArkTS的由来和演进

前言 在上一篇文章HarmonyOS&#xff08;二&#xff09;—— 初识ArkTS开发语言&#xff08;上&#xff09;之TypeScript入门&#xff0c;我初识了TypeScript相关知识点&#xff0c;也知道ArkTS是华为基于TypeScript发展演化而来。 从最初的基础的逻辑交互能力&#xff0c;到…