Vue中动态渲染表单并回显数据时，遇到input输入框因数据动态赋值再次输入而未渲染问题

于 2024-07-10 17:02:03 发布
阅读量541 收藏 5
点赞数 5
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60172238/article/details/140327969
版权

1、我这边的需求是，form表单名字和input都是动态渲染的，如下html代码，

看el-col里面的formData这个函数就可以,formData是模拟的数据

let formData = [{
    "createDept": "1002",
    "createUser": "1711649820528259074",
    "createTime": "2024-05-11 09:23:27",
    "updateUser": -1,
    "updateTime": "",
    "status": 0,
    "isDeleted": 0,
    "tenantId": "",
    "id": "1789103996464558081",
    "datasetId": "1789103996095459330",
    "dataItem": "名称",
    "dataItemCode": "",
    "dataTypeAndLength": "字符串型200汉字",
    "collectionRequirement": "发电厂名称全称",
    "taskId": null,
    "propertiesId": "",
    "coordinate": ""
},{
    "createDept": "1002",
    "createUser": "1711649820528259074",
    "createTime": "2024-05-11 09:23:27",
    "updateUser": -1,
    "updateTime": "",
    "status": 0,
    "isDeleted": 0,
    "tenantId": "",
    "id": "1789103996464558082",
    "datasetId": "1789103996095459330",
    "dataItem": "分类码",
    "dataItemCode": "",
    "dataTypeAndLength": "数值型(10)",
    "collectionRequirement": "",
    "taskId": null,
    "propertiesId": "",
    "coordinate": ""
},{
    "createDept": "1002",
    "createUser": "1711649820528259074",
    "createTime": "2024-05-11 09:23:27",
    "updateUser": -1,
    "updateTime": "",
    "status": 0,
    "isDeleted": 0,
    "tenantId": "",
    "id": "1789103996527472641",
    "datasetId": "1789103996095459330",
    "dataItem": "区域码",
    "dataItemCode": "",
    "dataTypeAndLength": "字符串型20汉字",
    "collectionRequirement": "国家名称简称 + 一级行政区名称，如中国河南省。",
    "taskId": null,
    "propertiesId": "",
    "coordinate": ""
},{
    "createDept": "1002",
    "createUser": "1711649820528259074",
    "createTime": "2024-05-11 09:23:27",
    "updateUser": -1,
    "updateTime": "",
    "status": 0,
    "isDeleted": 0,
    "tenantId": "",
    "id": "1789103996535861250",
    "datasetId": "1789103996095459330",
    "dataItem": "顺序码",
    "dataItemCode": "",
    "dataTypeAndLength": "数值型(10)",
    "collectionRequirement": "采集时由系统自动生成。",
    "taskId": null,
    "propertiesId": "",
    "coordinate": ""
}]

2、html代码

<div class="right_box">
            <div v-for="(t,i) in drawImgList" :key="i">
                <el-form v-if="t.isCurrent" :model="t.form" ref="dialogForm" label-width="auto" label-position="top">
                    <el-row :gutter="20">
                        <el-col :span="12" v-for="(item, index) in formData" :key="index">
                            <el-form-item :label="index + 1 + '. ' + item.dataItem" :prop="item.id">
                                <el-input v-model="t.form[item.id]" clearable @input="modeChang($event)"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

3、回显代码  res.data有模拟假数据 可以看看

//通过id回显编辑数据
		 getDeptApi(){
			let data = {
				dataItemId: this.itemObject.id,
			}
			let that = this
			AjaxUtil.tokenget(
				"jmis-cloud/api/jmis-smartgis/aimDataItemDetails/list",
				data,
				(res) => {
					if (res.success) {
						that.$nextTick(()=>{
							res.data.forEach((item) => {
								that.formData.forEach((info) => {
									if (item.dataStandardId === info.id) {
										// 找到匹配项后，直接更新当前遍历的drawImgList中form的对应属性
										that.drawImgList[0].form[info.id] = item.dataContent;
									}
								});
							});
							this.dialogVisible = true;
						})
				

						
					
						console.log('formData11',this.formData)
					} else {
						that.$alert(res.msg, "提示", {
							type: 'error'
						})
					}
				},
				(err) => {

				}
			);
		    },

  //模拟后端返回的值 
res.data  =  [
  {
    "createDept": "1002",
    "createUser": "1711649820528259074",
    "createTime": "2024-05-16 09:52:59",
    "updateUser": -1,
    "updateTime": "",
    "status": 0,
    "isDeleted": 0,
    "tenantId": "",
    "id": "1790923367195492354",
    "collectionTaskId": null,
    "dataStandardId": "1790917823550341121",
    "dataCategoryId": null,
    "dataItemId": "1790923367036108802",
    "indicatorName": "名称",
    "dataContent": "大潭发电厂",
    "materialName": "",
    "sourceUnit": "维基百科",
    "publicationTime": "",
    "collectionUnit": "",
    "collector": "",
    "collectionTime": "2024-04-23 18:44:35",
    "checker": "",
    "modificationOpinion": "",
    "modifier": ""
  },
  {
    "createDept": "1002",
    "createUser": "1711649820528259074",
    "createTime": "2024-05-16 09:52:59",
    "updateUser": -1,
    "updateTime": "",
    "status": 0,
    "isDeleted": 0,
    "tenantId": "",
    "id": "1790923367195492355",
    "collectionTaskId": null,
    "dataStandardId": "1790917823571312641",
    "dataCategoryId": null,
    "dataItemId": "1790923367036108802",
    "indicatorName": "分类码",
    "dataContent": "220104",
    "materialName": "",
    "sourceUnit": "维基百科",
    "publicationTime": "",
    "collectionUnit": "",
    "collector": "",
    "collectionTime": "2024-04-23 18:44:35",
    "checker": "",
    "modificationOpinion": "",
    "modifier": ""
  },


]

4、input动态有值后，再次输入失效，数据改变但未及时渲染的问题；用this.$forceUpdate();重新更新视图

  <el-input v-model="t.form[item.id]" clearable @input="modeChang($event)"></el-input>

     //更新视图
			modeChang(){
				this.$forceUpdate();
			},

5、完整代码 （从后端获取数据，到渲染，通过id回显，修改完后转给后端）

   <div v-for="(t,i) in drawImgList" :key="i">
                <el-form v-if="t.isCurrent" :model="t.form" ref="dialogForm" label-width="auto" label-position="top">
                    <el-row :gutter="20">
                        <el-col :span="12" v-for="(item, index) in formData" :key="index">
                            <el-form-item :label="index + 1 + '. ' + item.dataItem" :prop="item.id">
                                <el-input v-model="t.form[item.id]" clearable @input="modeChang($event)"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
	getSelectData(value) {
			let data = {
				current: 1,
				size: 100,
				datasetId: '1789103996095459330',// //记得改value  1788162073167982594 1768534495678627842
			}
			AjaxUtil.tokenget(
				"jmis-cloud/api/jmis-smartgis/aimCollectionStandards/page",
				data,
				(res) => {
					if (res.success) {
						this.formData = res.data.records
					} else {
						this.formData = []
					}
				},
				(err) => {
					this.formData = []
				}
			);
		},
	//编辑
		getEdit(row){
			this.type = row
			this.drawImgList.push({
				form:{},
				isCurrent: true
			})
			//根据id去复现数据
			this.getDeptApi()
		},
		//通过id回显编辑数据
		 getDeptApi(){
			let data = {
				dataItemId: this.itemObject.id,
			}
			let that = this
			AjaxUtil.tokenget(
				"jmis-cloud/api/jmis-smartgis/aimDataItemDetails/list",
				data,
				(res) => {
					if (res.success) {
						that.$nextTick(()=>{
							res.data.forEach((item) => {
								that.formData.forEach((info) => {
									if (item.dataStandardId === info.id) {
										// 找到匹配项后，直接更新当前遍历的drawImgList中form的对应属性
										that.drawImgList[0].form[info.id] = item.dataContent;
									}
								});
							});
							this.dialogVisible = true;
						})
				

						
					
						console.log('formData11',this.formData)
					} else {
						that.$alert(res.msg, "提示", {
							type: 'error'
						})
					}
				},
				(err) => {

				}
			);
		    },
             //更新视图
			modeChang(){
				this.$forceUpdate();
			},
	//保存编辑form数据
		submitFnForm(){
			let aimDataItemsDetailVosList = [];
			for(let i in this.drawImgList[0].form){
				aimDataItemsDetailVosList.push({"inputId":i,"value":this.drawImgList[0].form[i]})
			}
			
			let params = {
				// filePath:res.data,
				// ...this.drawImgList[0].coordinate,
				aimDataItemsDetailVos:aimDataItemsDetailVosList,
				id:this.itemObject.id
			}
			// saveAimData
			AjaxUtil.tokenpost(
				"jmis-cloud/api/jmis-smartgis/aimDataItemDetails/updateAimData",
				params,
				(res) => {
					if (res.success) {
						this.$message.success('操作成功')
						this.drawImgList.forEach(item => {
							if(item.isCurrent){
								item.form = {}
								this.drawImgList.splice(item,1)
							}
						});
						this.selectNameApi()
						this.closeDialog()
					
					} else {
						that.$alert(res.msg, "提示", {
							type: 'error'
						})
					}
				},
				(err) => {

				}
			);
		},

6、效果如下：

保存后传给后端

Tan-玛卡巴卡
关注
vue页面回显数据_vue + element-ui Table的数据多选，多页选择数据回显，分页记录保存选中的数据。...
weixin_39678426的博客
01-30 447
业务的需要：我要对与会人员勾选，记录所选的与会人员，并且点击到别的页面上时也要记录所勾选的。第一次尝试，每次点击下一页数据都会清空。然后我就去element ui官网查看了api.实现如下：在table一定要定义以下事件和列表属性：1、row-key，2、reserve-selectionhandleSelectionChange这个事件的作用是我保存勾选数据的。...... 在data的retu...
VUE+Layui 输入框、下拉选择框、复选框、开关、文本域 数据回显
夏已微凉、
07-18 1904
vue+layui表单数据回显
vuejs 动态添加input框的实例讲解
01-19
实例如下： <%@ page language=java contentType=text/html; charset=UTF-8 pageEncoding=UTF-8%> <%@ taglib prefix=c uri=http://java.sun.com/jsp/jstl/core %> <c var=front value=${frontPath}${pageContext.request.contextPath}/f/> <c:set var=ajaxUrl value=${frontPath}${pageContext.request.c
v-if=“this.form.getFieldValue(‘xxx‘)“ 内部使用v-decorator无法显示数据
最新发布
2302_76466023的博客
03-06 543
是否启用: <a-switch v-decorator="['', validatorRues.a]" @click="onClick"/>是否启用: <a-switch v-decorator"['a', validatorRues.a]" />可以设置model或者使用现有的data对象来接收a的初始值并为a-switch设置方法。在表单数据中需要先使用a选择是否启用b 来决定是否显示b输入框，使用v-if判断。但是如果form有初始值时，页面回显无法显示b的初始值。
vue动态创建input
weixin_50692948的博客
04-11 1288
【代码】vue动态创建input。
input输入框回显接口数据
小白白的博客
06-28 4970
input输入框动态显示数据 用v-model <input type="text" v-model="goods.title" maxlength=8 placeholder="请输入菜品名称" / goods.title为接口中的变量名，此时input框就显示出来接口里面的数据了
antd 的form 表单怎么回显数据_封装react antd的form表单组件
weixin_35565522的博客
12-30 2822
form表单在我们日常的开发过程中被使用到的概率还是很大的，比如包含了登录、注册、修改个人信息、新增修改业务数据等的公司内部管理系统。而在使用时这些表单的样式如高度、上下边距、边框、圆角、阴影、高亮等等都大同小异、大差不差且表单的功能基本相似，所以很有必要对这些表单来一个简单的封装。其实，封装组件的意义我们在上一篇封装react antd的表格table组件中已经介绍过了，这里不再做过多的描述了，...
解决elementUI中el-form、el-dialog、数据回显同时用时，有bug
qq_45532769的博客
10-29 4327
第一次打开网页，先点击修改，再点击新增，发现输入框竟然有值， 点击修改后，关闭对话框的时候，置空失效了
关于vue数据不显示及页面刷新二三事
class_zy的博客
07-02 3902
今天,在写vue使用element-ui时遇到了一个奇怪的问题,数据不回显,并且不论是input框还是select框都无法显示数据,并且在change事件输出时,发现数据已经赋值成功,但是并未更新到视图层. 于是在百度中寻找答案,没想到还真有很多小伙伴都是这样的情况,很多都说是因为数据层级过深,导致数据更新无法监听到数据的变化,就无法看到数据回显需要加一下代码. this.$forceUpdate() 尝试之后,真的成功了.但是,真的是因为数据层级的原因吗?我在其他地方使用的也是这样的数据结构,而且数据嵌
解决element-ui中input组件无法输入的问题
m0_46364033的博客
07-01 4622
今天在写项目的时候遇到一个问题：！！无论怎么按键盘都无法输入，也无法修改已经在数据，反正就是天打不动的呐。 小编这里呢是想在弹出的模态框里，进行“回复”，如果选中的问题已经有所回复，那么就可以修改，如下图中所示： 下面是这个模态框的代码 <!-- 点击回复弹出的模态框 --> <el-dialog title="回复提问" :visible.sync="dialogVisible" width="45%"> <el-form :model="repl
vue的数据回显
qq_45904712的博客
03-14 604
123
vue数据回显
weixin_45828554的博客
09-01 1329
vue数据回显 问题场景： 父组件传值给子组件，子组件使用 props 进行接收，但是 无法通过 “对象.属性” 的方式，将数据进行操作 解决方案： 因为数据还没过来，这是走接口的，不是实时的，大都会出现渲染后，数据还没过来的情况，然而页面已经渲染完了，需要等在数据过来在渲染 ...
vue table动态新增input行，修改值后无法输入
qq_41885295的博客
12-21 2339
vue table动态新增input行，修改值后无法输入；elementui table新增input框无法输入
element table中加入input、checkbox 数据无法正常渲染问题
u011028557的博客
08-01 709
element table中加入input、checkbox 数据无法正常渲染问题
vue 地址栏输入参数，获取对应参数数据并回显
m0_58893670的博客
04-24 617
路由后面拼接 appName = '参数' ，获取对应参数并把参数回显到 select 下拉框中。
Vue实现动态遍历生成el-input
博客简介
08-16 1934
动态遍历生成el-input并且添加自定义校验
Struts2实现input数据回显
weixin_34062469的博客
09-04 188
/** 修改页面 */ public String editUI() { //准备回显得数据 Role role = roleService.getById(id); ActionContext.getContext().getValueStack().push(role); //下面的方法也能实现数据回显 //...
Vue+Element一步步实现动态添加Input_输入框
热门推荐
weixin_45785873的博客
11-09 2万+
根据，老粉最近做的一些关于动态添加Input的需求，在这里总结几种用Vue+Element动态添加Input_输入框实现方案、解决单选转换多选无法清除数据、多数据渲染下拉框卡顿问题
Vue中动态数据渲染Echarts实战：watch技巧
该资源主要介绍了如何在Vue项目中使用Echarts库，并通过Vue的`watch`功能实现动态数据的渲染。首先，通过npm安装Echarts，并将其挂载到Vue的原型链上，以便在组件中方便调用。然后，在模板中创建一个用于展示图表的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值