vue2 中如何实现动态表单增删改查实例中如何实现动态表单增删改查实例
最近项目中遇到的需求是要操作大量的表单，之前的项目中有做过这方的研究，只不过是用jquery来操作。
项目项目A
先简单说说以前项目A中的应用场景，可能有小伙伴儿也遇到相同的需求。A项目是公司的OA系统中有的项目，是用java的jsp
渲染的页面，需求是要改成：嵌入APP中显示，前后端分离， 后端返回的内容，还不能修改， 只是后端同事做了下接口处
理，返回给前端的是一大堆的表单数据。
每个表单都有多个字段表示它的属性：
是否可编辑
表单类型 （text, textarea, select, radio, checkbox, hidden等 ）
与之联动的其他表单
。。。之前的方案就是各个表单类型和字段属性进行判断，调用不同的UI组件(如时间日历选择器等)
项目项目B
现在遇到的项目，展示类型少很多，第一个想到的就是同样的方法，不过这次使用的是Vue的双向绑定。
以下是我在python后端项目中的经验，如果没有兴趣可以直接看最后的动态表单部分
1 python 后端项目中如何引入后端项目中如何引入Vue
项目B用的是python的jinjia2的模板， 同样都是 {{}} 去解析数据，这种情况下怎么办呢？
{% raw %}
<script type="text/x-template" id="dialog-wrap">
<div class="ms-dialog-wrap" v-show="visible">
<div class="ms-dialog-inner">
<div class="ms-dialog-title">{{title}}</div>
<div class="ms-dialog-body">
<div class="ms-dialog-content">
<slot></slot>
</div>
<div class="ms-dialog-actions">
<a class="ms-button" @click="cancelAction">取消</a>
<a class="ms-button ms-success" @click="confirmSuccess">确定</a>
</div>
</div>
</div>
<div class="ms-overlayer" @click="cancelAction"></div>
</div>
</script>
{% endraw %}
jinjia2中使用 raw 可以阻止解析内部的代码，这样就可以引入我们的vue模板了，这里是我写的一个dialog弹框的组件
2 定义组件定义组件
这里以dialog弹窗组件为例子，直接上代码
// 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: {
weixin_38664469
- 粉丝: 5
- 资源: 896
最新资源
- Electron + Vue仿网易云音乐windows客户端.zip
- Dropzone.js 的 Vue.js 组件 - 带有图像预览的拖放文件上传实用程序.zip
- vue框架开发，如何在vue框架下编写代码介绍
- 移动机器人路径规划实战，入门教程实验代码
- Chart.js 的 Vue.js 包装器.zip
- BootstrapVue 为 Vue.js 提供了最全面的 Bootstrap v4 实现之一 具有广泛且自动化的 WAI-ARIA 可访问性标记 .zip
- Babel , Vue JSX 相关软件包的 monorepo.zip
- Java多线程基础学习指南：原理、实现与实战
- 西电微机原理实验：实验内容、步骤与实践指导 - 计算机科学与技术专业的教学辅助材料
- 计算机网络课程设计：选题指南与实践要点
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
前往页