实现Select与输入框的数据联动

效果如下：

1.假数据实现效果

<a-row :gutter="24" type="flex" justify="center"><a-col :span="10" :style="{ textAlign: 'center' }"><a-form-item label="跨径类型" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"><a-select@change="kuaJingFenLeiLeiXing"v-decorator="['kuaJingFenLeiLeiXing',  {rules: [{ required: true, message: '不能为空' }]} ]"><a-select-option key="1" value="边防">边防</a-select-option><a-select-option key="2" value="海防">海防</a-select-option><a-select-option key="3" value="内陆">内陆</a-select-option></a-select></a-form-item></a-col><a-col :span="10" :style="{ textAlign: 'center' }"><a-form-item label="跨径代码" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"><a-inputdisabledv-decorator="['kuaJingFenLeiDaiMa',  {rules: [{ required: true, message: '不能为空' }]} ]"/></a-form-item></a-col></a-row>

js方法

//跨径分类类型kuaJingFenLeiLeiXing(value, data) {console.log(value, data)this.form.setFieldsValue({//setFieldsValue 用给来设置from表单输入控件的值kuaJingFenLeiDaiMa: data.key,})},

查看console.log

2.调用后台传递数据

<a-row :gutter="24" type="flex" justify="center"><a-col :span="10" :style="{ textAlign: 'center' }"><a-form-item label="跨径类型" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"><a-select@change="kuaJingFenLeiLeiXing"v-decorator="['kuaJingFenLeiLeiXing',  {rules: [{ required: true, message: '不能为空' }]} ]"><a-select-optionv-for="item in kuaJingFenLeiLeiXingList":key="item.bianHao":value="item.leiMu">{{item.leiMu }}</a-select-option></a-select></a-form-item></a-col><a-col :span="10" :style="{ textAlign: 'center' }"><a-form-item label="跨径代码" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"><a-inputdisabledv-decorator="['kuaJingFenLeiDaiMa',  {rules: [{ required: true, message: '不能为空' }]} ]"/></a-form-item></a-col></a-row>

js方法不变

//跨径分类类型kuaJingFenLeiLeiXing(value, data) {console.log(value, data)this.form.setFieldsValue({//setFieldsValue 用给来设置from表单输入控件的值kuaJingFenLeiDaiMa: data.key,})},

效果：
console输出值

实现Select与输入框的数据联动相关推荐

FineReport 报表数据根据下拉框的值进行数据联动
FineReport 报表数据根据下拉框的值进行数据联动,不用点击查询按钮 1.新建数据库查询,获得数据. SELECT * FROM [销量] where 地区 ='${area}' 2.把需要展示 ...
SpringBoot+Vue实现个人信息以及头像数据联动
一.功能展示二.前言我们在进行功能实现的时候,个人信息是极其重要的一部分.不仅能展示用户的信息给用户,还能让我们的项目更多元化,让用户的体验感得到提升. 我们后端利用SpringBoot整合Myb ...
表间数据复制--SELECT表中的数据插入到新的表中(ORACLE,MSSQL)
表间数据复制--SELECT表中的数据插入到新的表中 --在Oracle 9i中 CREATE TABLE scott.test AS (SELECT DISTINCT empno,ename,hir ...
5.1.4 SELECT+RIGHT JOIN读取数据
5.1.4 SELECT+RIGHT JOIN读取数据语法结构: RIGHT JOIN:包含左右表所有的记录 RIGHT JOIN图示如下: 2021年9月10日写于芜湖
5.1.3 SELECT+INNER JOIN读取数据
5.1.3 SELECT+INNER JOIN读取数据语法结构: LEFT JOIN:查询结果集中包含左表中的所有数据记录,右表中仅查询出包含相对应的匹配条件的数据 LEFT JOIN图示如下: 2 ...
5.1.2 SELECT+INNER JOIN读取数据
5.1.2 SELECT+INNER JOIN读取数据语法结构: INNER JOIN:查询结果包含两个连接表中彼此相对应的数据记录 INNER JOIN图示如下: 实例标题:SELECT + IN ...
vue data变量之间相互赋值或进行数据联动
一.变量之间赋值 data:{domain:"domain",publicKey:"123",secretKey:"123",sub:&qu ...
微信小程序批量获取input的输入值，监听输入框，数据同步
微信小程序批量获取input的输入值,监听输入框,数据同步在使用小程序时,跟vue的数据绑定不一样,没有v-model这个属性了,官网也只是给了一些事件监听. 但是我们如果有多个表单时,需要写多个事 ...
几张表格怎么联动_在excel 中，怎样实现数据关联？：excel怎么把几个表格的数据联动...
在excel 中,怎样实现数据关联? Excel数据关联可以利用公式来. 软件版本:Office2007 举例说明如下: 1.Sheet1如下数据,设置Sheet2中对元格数据与之关联起来: 2.在S ...

实现Select与输入框的数据联动

实现Select与输入框的数据联动相关推荐

最新文章

热门文章