vue2 中如何实现动态表单增删改查实例
前端之家收集整理的这篇文章主要介绍了
vue2 中如何实现动态表单增删改查实例,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_5020@最近项目中遇到的需求是要操作大量的表单,之前的项目中有做过这方的研究,只不过是用jquery来操作。
@H
502_0@
项目A
@H_
502_0@先简单说说以前项目A中的应用场景,可能有小伙伴儿也遇到相同的需求。A项目是公司的OA系统中有的项目,是用java的jsp渲染的
页面,需求是要改成:嵌入APP中
显示,前后端分离, 后端返回的
内容,还不能
修改, 只是后端同事做了下接口处理,返回给前端的是一大堆的表单数据。
@H_
502_0@每个表单都有多个字段表示它的
属性:
- 是否可编辑
- 表单类型 (text,textarea,select,radio,checkBox,hidden等 )
- 与之联动的其他表单
- 。。。之前的方案就是各个表单类型和字段属性进行判断,调用不同的UI组件(如时间日历选择器等)
@H_
502_0@
项目B
@H_
502_0@现在遇到的项目,展示类型少很多,第一个想到的就是同样的
方法,不过这次使用的是Vue的双向绑定。
@H_
502_0@以下是我在python后端项目中的经验,如果没有兴趣可以直接看最后的动态表单部分
@H_
502_0@
1 python 后端项目中如何引入Vue
@H_
502_0@项目B用的是python的jinjia2的模板, 同样都是 {{}} 去解析数据,这种情况下怎么办呢?
{% endraw %}
@H_
502_0@jinjia2中使用 raw 可以阻止解析内部的
代码,这样就可以引入我们的vue模板了,这里是我写的一个dialog弹框的组件
@H_
502_0@
2 定义组件
@H_
502_0@这里以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)
}
})
@H_
502_0@
动态表单组件
@H_
502_0@一般的需求是:
- 一个列表,可以实现列表的动态添加,删除。
- 列表中的每一项是动态的表单,表单个数不确定,
- 有提交功能,提交或者可以保存整个表单
- 保存的表单,通过接口调回后,回填表单,还可以再次修改、增加、删除等
@H_
502_0@
1 如何生成动态表单
用户名
@H_
502_0@我们的与后端商量好的数据格式可以是这样的;
@H_
502_0@这样一个动态模板就
生成了,其他更多类型都可以定义。这份模板数据,一般是需要缓存的。因为接下来的
添加操作也需要这份数据。
@H_
502_0@
@H_
502_0@上面的template只是其中一个动态列表。
@H_
502_0@add的
方法一般是:
@H_
502_0@这里需要注意的是,如果这份模板的数据,你是通过在data
属性中定义的字段去缓存的,那有可能遇到的是你通过
添加操作之后的表单的值会,会随着其中的某个表单的值一起联动。
@H_
502_0@具体原因,猜测是这里的数据已经是变成响应式的了, 又或者你 通过实例化后的值去缓存这份模板数据,可能结果还是这样。
具体
代码可能是这样的:
{
// 此处缓存了这份模板数据,cacheTemplate中的数据已经变成响应式的了
this.cacheTemplate = res.body.data
this.books.push(res.body.data) // 创建第一动态表单列表
// 或者你是这是定义的的,此时data中没有cacheTemplate这个值,
// 这样定义按理说是非响应式的,但实际情况并非如此,在项目中发现它还是会影响其他表单
vm.cacheTemplate = res.body.data
this.books.push(res.body.data) // 创建第一动态表单列表
},res => {
})
},add: function () {
// 此处你会发现你新创建的表单的值会影响其他表单
// log出来this.cacheTemplate你会发现里面的值已经发生了变换
this.books.push(this.cacheTemplate)
}
}
})
@H_
502_0@这里this.cacheTemplate的值为什么会发生变换,没有搞明白, 猜测原因可能是变成响应式了,vue中会实时监控跟踪,对vue原理理解好的小伙伴可以
评论告诉我原因。
@H_
502_0@下面说下我的
解决方法: 我不管你是不是响应式的,因为是对象,你才能监控到变换,那我把你变成字符串不就好了。
直接上
代码:
{
// 此处同样缓存了这份模板数据,不同的是把它变成了字符串
this.cacheTemplate = JOSN.stringify(res.body)
this.books.push(res.body) // 创建第一动态表单列表
},add: function () {
// 此处转化成json对象,你发现this.cacheTemplate中的值是没有变换的。
var cacheTemplate = JSON.parse(this.cacheTemplate)
this.books.push(cacheTemplate)
}
}
})
@H_
502_0@这样其他表单值变换的时候都不会影响到我这份模板的数据,问题
解决了。
@H_
502_0@以上就是本文的全部
内容,希望对大家的学习有所帮助,也希望大家多多
支持编程之家。