vue2 中如何实现动态表单增删改查实例

前端之家收集整理的这篇文章主要介绍了vue2 中如何实现动态表单增删改查实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近项目中遇到的需求是要操作大量的表单,之前的项目中有做过这方的研究,只不过是用jquery来操作。

项目A

先简单说说以前项目A中的应用场景,可能有小伙伴儿也遇到相同的需求。A项目是公司的OA系统中有的项目,是用java的jsp渲染的页面,需求是要改成:嵌入APP中显示,前后端分离, 后端返回的内容,还不能修改, 只是后端同事做了下接口处理,返回给前端的是一大堆的表单数据。

每个表单都有多个字段表示它的属性

  1. 是否可编辑
  2. 表单类型 (text,textarea,select,radio,checkBox,hidden等 )
  3. 与之联动的其他表单
  4. 。。。之前的方案就是各个表单类型和字段属性进行判断,调用不同的UI组件(如时间日历选择器等)

项目B

现在遇到的项目,展示类型少很多,第一个想到的就是同样的方法,不过这次使用的是Vue的双向绑定。

以下是我在python后端项目中的经验,如果没有兴趣可以直接看最后的动态表单部分

1 python 后端项目中如何引入Vue

项目B用的是python的jinjia2的模板, 同样都是 {{}} 去解析数据,这种情况下怎么办呢?

{% endraw %}

jinjia2中使用 raw 可以阻止解析内部的代码,这样就可以引入我们的vue模板了,这里是我写的一个dialog弹框的组件

2 定义组件

这里以dialog弹窗组件为例子,直接上代码

required: false } },computed: { visible: function () { return this.value } },watch: { visible: function (newVal) { if (newVal) { document.addEventListener('wheel',this.disabledScroll,false) } else { document.removeEventListener('wheel',false) } } },methods: { confirmSuccess: function () { this.$emit('confirm-success') },cancelAction: function () { this.$emit('input',false) },disabledScroll: function (e) { e.preventDefault() } },beforeDestroy: function () { document.removeEventListener('scroll',false) } })

动态表单组件

一般的需求是:

  1. 一个列表,可以实现列表的动态添加删除
  2. 列表中的每一项是动态的表单,表单个数不确定,
  3. 有提交功能,提交或者可以保存整个表单
  4. 保存的表单,通过接口调回后,回填表单,还可以再次修改增加删除

1 如何生成动态表单

用户名
密码
说明