当前位置: 首页 > 网络应用技术

Elementui动态渲染表格使用提交数据来获取提交的数据

时间:2023-03-05 19:16:40 网络应用技术

  我的项目具有一个通用格式组件,它在内部具有大量的形式元素,包括输入,复选框,选择,无线电等。

  此表单组件根据需要在不同页面上显示不同的表元素。

  如此复杂的组件,我绝对不能手动安排它。

  因此,果断地遵循背景,通过在后台返回的JSON数据制作动态渲染页面元素。其他不便的数据返回,编写本地JSON。

  这样的

  然后,我们遍历了此JSON数据,并根据类型字段渲染表单元素。

  写完美。

  一旦提交数据,就发现未批准后端验证。

  开放网络,看看邪恶在风中在哪里?

  已经发现,因为项目是VUE,因为所有格式数据都将在数据功能的表单属性下定义:例如:

  结果,在用AXIO提交数据时,所有表格的数据都会共同提交。这里的表单是几页共享的所有数据。

  由于该页面通过各种V-FOR动态生成当前页面所需的表单元元素,因此在提交时,数据中定义的数据不容易判断。

  如果您手动编写各种条件以判断提交的数据,哪些数据被过滤且判断过多,则代码很大,并且不容易维护。

  因此,我想到了使用Form自己的提交,Hehehehe。

  由于提交附带的表格是根据页面元素提交的数据,因此,如果我们使用此提交方法,请首先收集背景所需的数据,因此不等于添加DataFilter中定义的表单层?

  因此,它可以完美地解决我的需求。

  因此,问题是如何在VUE中使用表单以获取数据?

  首先,我们有一个表单,表单中的所有元素都有名称属性。

  然后,通过手动调用获得表单表中的数据

  可疑的交点我的ifloginforbid在哪里~~打印并查看

  这是一个令人发指的价值。

  检查元素并找到该复选框是看不见的状态。这是否应该是为什么未选择不稳定的原因,并且FormData根本没有获得此数据?

  然后我检查此复选框,然后测试波浪

  出去!这是不科学的,它实际上是一个空的字符!复选框不应该将其绑定为布尔类型的值吗?

  再次查看元素,看看diao Min再次伤害了我。

  我发现选择的EL-Checkbox中的输入就是这样:

  这个组件突变是否太深了?不探索研究。但是我知道正常的输入可能是这样的:

  因此,根据上述规则,我自己意识到了一个MyCheckbox组件:

  在父组件中使用:

  再次查看

  成功,这次我们成功地获得了页面上所有表元素的数据,并生成要提交给背景的数据。

  作者:阳光同学