vue依据下拉框选择其余信息

ops/2024/12/15 14:17:03/

下拉框选择内容后,其余input框与该下拉框相关的内容实时回显,用@change=加方法

<el-row><el-col :span="12"><el-form-item label="选择站点" prop="resourcesId"><el-select v-model="form.resourcesId" @change="updateInput" placeholder="请选择要申请的站点"><el-option v-for="item in tableList" :key="item.id" :label="item.stationName" :value="item.id":disabled="item.status == 1"></el-option></el-select></el-form-item></el-col><el-col span="12"><el-form-item label="租金" prop="amount"><el-input v-model="form.amount" placeholder="请输入租金" /></el-form-item></el-col></el-row><el-row><el-col span="12"><el-form-item label="开始日期" prop="beginTime"><el-date-picker clearable v-model="form.beginTime" type="date" value-format="yyyy-MM-dd"placeholder="请选择租金开始日期"></el-date-picker></el-form-item></el-col>

change方法内容,tableList是数据数组

javascript">updateInput() {const selectedStationId = this.form.resourcesId;const selectedStation = this.tableList.find(item => item.id === selectedStationId);if (selectedStation && selectedStation.rent) {this.form.amount = selectedStation.amount;//租金this.form.beginTime = selectedStation.endTime;//时间// console.log(selectedStation.amount);} else {this.form.amount = '';}},


http://www.ppmy.cn/ops/142127.html

相关文章

【Linux网络】网络基础:传输层UDP/TCP协议(一)

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;Linux “ 登神长阶 ” &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀ 传输层UDP/TCP协议 &#x1f4d2;端口号&#x1f4dc;UDP协议UDP协议端格式UDP的特点UDP的缓…

【知识科普】工作流引擎activiti详细介绍

工作流引擎activiti 概述一、概述二、主要特点三、核心组件四、应用场景五、数据库表结构六、搭建与使用七、优势与局限性 核心组件介绍一、Activiti Engine&#xff08;流程引擎&#xff09;二、建模组件三、管理组件四、其他核心组件 如何实现审批流流转一、准备工作二、定义…

.NET(C#) 如何配置用户首选项及保存用户设置

最近开发软件&#xff0c;需要将用户设置保存下来以便下次打开后再用&#xff0c;看了半天原来.NET框架自带setting功能。记录如下&#xff1a; 一&#xff0c;“设置” 页面 使用项目设计器的“设置”页指定项目的应用程序设置。 通过应用程序设置&#xff0c;能够为应用程序…

初次使用uniapp编译到微信小程序编辑器页面空白,真机预览有内容

uniapp微信小程序页面结构 首页页面代码 微信小程序模拟器 模拟器页面为空白时查了下&#xff0c;有几个说是“Hbuilder编译的时候应该编译出来一个app.js文件 但是却编译出了App.js”&#xff0c;但是我的小程序结构没问题&#xff0c;并且真机预览没有问题 真机调试 根据defi…

axios请求拦截器和响应拦截器,封装naive-ui的 Loading Bar加载条和useMessage消息提示

接之前的博客设计从0开始边做边学&#xff0c;用vue和python做一个博客&#xff0c;非规范化项目&#xff0c;怎么简单怎么弄&#xff0c;跑的起来有啥毛病解决啥毛病&#xff08;三&#xff09;&#xff0c;目前已经完成了基本的功能demo&#xff0c;但是请求接口不可能每个页…

微服务-01

1.认识微服务 1.1 单体架构 单体架构&#xff08;monolithic structure&#xff09;&#xff1a;顾名思义&#xff0c;整个项目中所有功能模块都在一个工程中开发&#xff1b;项目部署时需要对所有模块一起编译、打包&#xff1b;项目的架构设计、开发模式都非常简单。 当项目…

skywalking实现链路追踪-笔记

本文属于b站图灵课堂springcloud笔记系列。讲的好还不要钱&#xff0c;值得推荐。 为什么采用链路追踪&#xff1f; 为了排查问题&#xff0c;从请求源头到底层服务的全链路环节进行追踪。 skywalking 是什么&#xff1f; 分布式系统的应用程序性能监视工具&#xff0c;专为…

金融机构远程办公面临的安全挑战

当前&#xff0c;金融机构的业务模式、IT架构都发生了深刻变化。在建设远程办公系统时&#xff0c;金融机构需要面对以下几个方面的挑战&#xff1a; 如何实现“边界模糊化”网络环境下的安全接入&#xff1f; 随着金融机构基础设施云化、业务互联网化和办公移动化&#xff0…