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

发布时间：2020-12-17 02:55:50 所属栏目：百科来源：网络整理

导读：最近项目中遇到的需求是要操作大量的表单，之前的项目中有做过这方的研究，只不过是用jquery来操作。项目A 先简单说说以前项目A中的应用场景，可能有小伙伴儿也遇到相同的需求。A项目是公司的OA系统中有的项目，是用java的jsp渲染的页面，需求是要改成：嵌

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

项目A

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

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

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

项目B

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

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

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

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

{% endraw %}

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

2 定义组件

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

动态表单组件

一般的需求是：

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

1 如何生成动态表单

用户名

密码

说明

</div>
   <div class="list-item" v-if="list.type === 'select'">
    <label>性别</label>
    <select v-model="list.value" :value="list.defaultValue">
      <option v-for="sub in list.source" :value="sub.value">{{sub.label}}</option>
    </select>
   </div>
</template>
</pre>
</div>
<p>我们的与后端商量好的数据格式可以是这样的；</p>
<div class="jb51code">
<pre class="brush:js;">
lists: [{
 type: 'input',defaultValue: 'tom',value: 'tom'
},{
 type: 'input',defaultValue: '123456',value: '123456'
},{
 type: 'textarea',{
 type: 'select',defaultValue: '0',value: '0',source: [{
  value: '1',label: '男'
 }， {
  value: '1,label: '女'
 }]
}]
</pre>
</div>
<p>这样一个动态模板就生成了，其他更多类型都可以定义。这份模板数据，一般是需要缓存的。因为接下来的 添加操作也需要这份数据。</p>
<p><h3>添加操作</h3></p>
<p>上面的template只是其中一个动态列表。</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<div v-for="book in books">
  <template v-for="item in book.lists">
   ......
  </template>
</div>
<div class="actions">
<button @click="add"></button>
</div></pre>
</div>
<p>add的方法一般是：</p>
<div class="jb51code">
<pre class="brush:js;">
methods: {
 add: function () {
  this.books.push({
  lists: [{
   type: 'input',value: 'tom'
  },{
   type: 'input',value: '123456'
  },{
   type: 'textarea',{
   type: 'select',source: [{
    value: '1',label: '男'
   }， {
    value: '1,label: '女'
   }]
  }]
 })
 },</pre>
</div>
<p>这里需要注意的是，如果这份模板的数据，你是通过在data属性中定义的字段去缓存的，那有可能遇到的是你通过添加操作之后的表单的值会，会随着其中的某个表单的值一起联动。
</p>
<p>具体原因，猜测是这里的数据已经是变成响应式的了， 又或者你 通过实例化后的值去缓存这份模板数据，可能结果还是这样。
具体代码可能是这样的：</p>
<div class="jb51code">
<pre class="brush:js;">
var vm = new Vue({
  data: {
    books: [],cacheTemplate: null
  },methods: {
    getForms: function (argument) {
      this.$http.post(url,paras).then(res => {
        // 此处缓存了这份模板数据，cacheTemplate中的数据已经变成响应式的了
        this.cacheTemplate = res.body.data
        this.books.push(res.body.data) // 创建第一动态表单列表
<pre><code>    // 或者你是这是定义的的,此时data中没有cacheTemplate这个值， 
    // 这样定义按理说是非响应式的，但实际情况并非如此，在项目中发现它还是会影响其他表单
    vm.cacheTemplate = res.body.data
    this.books.push(res.body.data) // 创建第一动态表单列表
  },res => {

})
},add: function () {
  // 此处你会发现你新创建的表单的值会影响其他表单
  // log出来this.cacheTemplate你会发现里面的值已经发生了变换
  this.books.push(this.cacheTemplate)
}</code></pre>
<p>}<br />
})</p>
</pre>
</div>
<p>这里this.cacheTemplate的值为什么会发生变换，没有搞明白， 猜测原因可能是变成响应式了，vue中会实时监控跟踪，对vue原理理解好的小伙伴可以评论告诉我原因。
</p>
<p>下面说下我的解决方法: 我不管你是不是响应式的，因为是对象，你才能监控到变换，那我把你变成字符串不就好了。
直接上代码：</p>
<div class="jb51code">
<pre class="brush:js;">
var vm = new Vue({
  data: {
    books: [],paras).then(res => {
        // 此处同样缓存了这份模板数据，不同的是把它变成了字符串
        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)
    }
  }
})
</pre>
</div>
<p>这样其他表单值变换的时候都不会影响到我这份模板的数据，问题解决了。
</p>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。</p>                        <p style="text-align:right;">（编辑：李大同）</p>
<p style="text-align:right;">【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!</p>
                    </td>
                  </tr>
                </table>
            </div>
            <div class="dede_pagess"><ul class="pagelist"></ul></div>
            <div class="ad-690"><script src='https://ess.0577qiche.com/d/js/acmsd/ad76.js' language='javascript'></script></div>
            <div class="g-box10">
            	<div class="t-2">相关内容</div>
<ul class="b-box12"></ul>
<ul class="b-box13"><li><a href="https://www.lidatong.com.cn/html/baike/2020/1217/539908.html" target="_blank">ruby-on-rails – Ruby On Rails 5,activerecord query其中</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/431407.html" target="_blank">EasyUI form ajax submit后，在IE下提示下载内容的解决办法</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/314185.html" target="_blank">c# – 使用.Net技术开发智能卡读卡器</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/440046.html" target="_blank">用realloc缩小</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1213/145395.html" target="_blank">正则表达式</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/455760.html" target="_blank">XML学习笔记一</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/400423.html" target="_blank">.Net AJAX表格控件-不写一行代码就能做复杂AJAX应用</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/485919.html" target="_blank">C中抛出异常的生命周期</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1217/540555.html" target="_blank">mpvue小程序仿qq左滑置顶删除组件</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1213/129423.html" target="_blank">JNI出现无法找到依赖库的问题汇总(1)——Can&#39;t find de</a></li><div class="cl"></div></ul>
            </div>
        </div>
    </div>
    <div class="right-1 fr">
    	<div class="g-box8">
        <div class="t-2">推荐文章</div>
            <ul></ul>
        </div>
    	<div class="g-box11">
        <div class="t-2">站长推荐</div>
            <ul class="b-box7"><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/431200.html" target="_blank">微信APP支付统一下单、加签、map转xml，java代码</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/180699.html" target="_blank">数组 – 有没有办法在Swift中重写数组到字符串的</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/177387.html" target="_blank">Swift版Facebook POP</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/260782.html" target="_blank">The value of ESP was not properly saved acros</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/514010.html" target="_blank">ruby-on-rails-3.1 – 耙资产：推送到Heroku时预</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/426644.html" target="_blank">c# – MVC3 Json函数隐藏特定属性</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/452617.html" target="_blank">测试 svm 训练的xml 分类器 ~</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1217/544485.html" target="_blank">ruby – `[]`如何与lambda一起使用</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/293966.html" target="_blank">理解Flexbox：你需要知道的一切（2）</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/170395.html" target="_blank">常见的正则验证</a></li></ul>
        </div>
        <script type="text/javascript">jQuery(".g-box8").slide({ titCell:"li",triggerTime:0 });	</script>
        <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad103.js' language='javascript'></script></div>
    	<div class="g-box3 u-3">
        <div class="t-1">热点阅读</div>
            <ul class="b-box2"></ul>
        </div>
        <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad77.js' language='javascript'></script></div>
        </div>
	<div class="cl"></div>
</div>
<div class="ad-960"><script src='https://ess.0577qiche.com/d/js/acmsd/ad78.js' language='javascript'></script></div>
<div class="footer">
<p>【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。</p>
<p>建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果</p>
<p>Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同</p>
<p><script type="text/javascript" src="//js.users.51.la/21280179.js"></script></p>
</div>
</body>
</html>