通过layui在前端获取数据回填表单

在更新功能中,通过layui直接在前端查到数据,并回填到表单。不再使用sql语句根据id查询单条数据

语法:form.val(‘filter’, object);

用于给指定表单集合的元素赋值和取值。如果 object 参数存在,则为赋值;如果 object 参数不存在,则为取值

filter为class=“layui-form” 所在元素对应的lay-filter=””对应的值

table.on('tool(testTable)', function (obj) { //tool 是行工具条事件名
	var data = obj.data; //获得当前行数据
	edit_layer_index = layer.open({
		type:1,
		title:["编辑","padding-left:5px"],
		content:layui.$("#user_edit_form"),
		shade:false,
		area:"500px",
	})
	console.log(data)
	//获取表单回填数据
	form.val("user_edit",data)
})
// 编辑表单提交
form.on('submit(user_edit_submit)',function (data) {	      
	var updatFormData = data.field
	$.ajax({
		type:"post",
		url:"http://localhost:8080/ssm/updatUser",
		data:JSON.stringify(updatFormData),
		contentType:"application/json",
		xhrFields: {
		// 跨域携带cookie
			withCredentials: true
		},
		crossDomain: true,
		success:function (ret) {
			if(ret.code==1){
			layer.close(edit_layer_index)
			layer.msg("修改成功")
			table.reload("user_table")
			}else {
				layer.close(edit_layer_index)
				layer.msg("修改失败")
			}
		}
	});
})
<!--编辑表单-->
<div id="user_edit_form" style="display: none;padding: 10px;">
    <form class="layui-form" lay-filter="user_edit">
	<!--输入框-->
    </form>
</div>
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue 3中使用TypeScript进行表单数据回填,你可以按照以下步骤操作: 1. 定义表单数据的类型:首先,创建一个接口或类型来定义表单数据的结构。例如: ```typescript interface FormData { name: string; email: string; // 其他字段... } ``` 2. 在组件中定义表单数据变量:在Vue组件中,使用`ref`或`reactive`来定义表单数据变量,并将其初始化为空对象或按照类型定义进行初始化。例如: ```typescript import { ref } from 'vue'; export default { setup() { const formData = ref<FormData>({ name: '', email: '', }); // 其他逻辑... return { formData, // 其他返回值... } } } ``` 3. 绑定表单输入字段:将表单输入字段与表单数据变量进行双向绑定,以实现数据回填。例如: ```html <template> <form> <label for="name">Name:</label> <input type="text" id="name" v-model="formData.name"> <label for="email">Email:</label> <input type="email" id="email" v-model="formData.email"> <!-- 其他表单字段... --> <button type="submit">Submit</button> </form> </template> ``` 4. 数据回填:如果有需要在组件加载时回填表单数据的需求,可以在组件的`mounted`或`onMounted`生命周期钩子中进行数据回填。例如: ```typescript import { onMounted } from 'vue'; export default { setup() { const formData = ref<FormData>({ name: '', email: '', }); onMounted(() => { // 从API或其他地方获取表单数据,并赋值给formData formData.value.name = 'John Doe'; formData.value.email = 'john@example.com'; }); return { formData, } } } ``` 这样,当组件加载时,表单的输入字段将自动填充为预先设定的值。 希望以上步骤对你有帮助!如果还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值