最近项目中遇到的需求是要操作大量的表单，之前的项目中有做过这方的研究，只不过是用jquery来操作。
项目A
先简单说说以前项目A中的应用场景，可能有小伙伴儿也遇到相同的需求。A项目是公司的OA系统中有的项目，是用java的jsp渲染的页面，需求是要改成：嵌入APP中显示，前后端分离， 后端返回的内容，还不能修改， 只是后端同事做了下接口处理，返回给前端的是一大堆的表单数据。
每个表单都有多个字段表示它的属性：
- 是否可编辑
- 表单类型 （text,textarea,select,radio,checkBox,hidden等 ）
- 与之联动的其他表单
- 。。。之前的方案就是各个表单类型和字段属性进行判断，调用不同的UI组件(如时间日历选择器等)
项目B
现在遇到的项目，展示类型少很多，第一个想到的就是同样的方法，不过这次使用的是Vue的双向绑定。
以下是我在python后端项目中的经验，如果没有兴趣可以直接看最后的动态表单部分
1 python 后端项目中如何引入Vue
项目B用的是python的jinjia2的模板， 同样都是 {{}} 去解析数据，这种情况下怎么办呢？
rush:xhtml;">
{% raw %}
{% endraw %}
jinjia2中使用 raw 可以阻止解析内部的代码，这样就可以引入我们的vue模板了，这里是我写的一个dialog弹框的组件
2 定义组件
这里以dialog弹窗组件为例子，直接上代码
rush:js;">
// dialog弹框
Vue.component('ms-dialog',{
name: 'ms-dialog',template: '#dialog-wrap',data: function () {
return {
}
},props: {
title: String,value: {
type: Boolean,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 如何生成动态表单
rush:xhtml;">
用户名
密码
说明