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


Posted in Javascript onJune 09, 2017

最近项目中遇到的需求是要操作大量的表单,之前的项目中有做过这方的研究,只不过是用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的模板, 同样都是 {{}} 去解析数据,这种情况下怎么办呢?

{% 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: {
  visible: function (newVal) {
   if (newVal) {
    document.addEventListener('wheel', this.disabledScroll, false)
   } else {
    document.removeEventListener('wheel', this.disabledScroll, false)
   }
  }
 },
 methods: {
  confirmSuccess: function () {
   this.$emit('confirm-success')
  },
  cancelAction: function () {
   this.$emit('input', false)
  },
  disabledScroll: function (e) {
   e.preventDefault()
  }
 },
 beforeDestroy: function () {
  document.removeEventListener('scroll', this.disabledScroll, false)
 }
})

动态表单组件

一般的需求是:

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

1 如何生成动态表单

<template v-for="item in lists">
   <div class="list-item" v-if="list.type === 'input'">
    <label>用户名</label>
    <input type="text" v-model="item.value" :value="list.defaultValue" class="form-control">
   </div>
   <div class="list-item" v-if="list.type === 'input'">
    <label>密码</label>
    <input type="text" v-model="item.value" :value="list.defaultValue" class="form-control">
   </div>
   <div class="list-item" v-if="list.type === 'textarea'">
    <label>说明</label>
    <textarea rows="3" v-model="item.value" :value="list.defaultValue" class="form-control"></textarea>
   </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>

我们的与后端商量好的数据格式可以是这样的;

lists: [{
 type: 'input',
 defaultValue: 'tom',
 value: 'tom'
}, {
 type: 'input',
 defaultValue: '123456',
 value: '123456'
}, {
 type: 'textarea',
 defaultValue: '123456',
 value: '123456'
}, {
 type: 'select',
 defaultValue: '0',
 value: '0',
 source: [{
  value: '1',
  label: '男'
 }, {
  value: '1,
  label: '女'
 }]
}]

这样一个动态模板就生成了,其他更多类型都可以定义。这份模板数据,一般是需要缓存的。因为接下来的 添加操作也需要这份数据。

添加操作

上面的template只是其中一个动态列表。

<div v-for="book in books">
  <template v-for="item in book.lists">
   ......
  </template>
</div>
<div class="actions">
<button @click="add"></button>
</div>

add的方法一般是:

methods: {
 add: function () {
  this.books.push({
  lists: [{
   type: 'input',
   defaultValue: 'tom',
   value: 'tom'
  }, {
   type: 'input',
   defaultValue: '123456',
   value: '123456'
  }, {
   type: 'textarea',
   defaultValue: '123456',
   value: '123456'
  }, {
   type: 'select',
   defaultValue: '0',
   value: '0',
   source: [{
    value: '1',
    label: '男'
   }, {
    value: '1,
    label: '女'
   }]
  }]
 })
 },

这里需要注意的是,如果这份模板的数据,你是通过在data属性中定义的字段去缓存的,那有可能遇到的是你通过添加操作之后的表单的值会,会随着其中的某个表单的值一起联动。

具体原因,猜测是这里的数据已经是变成响应式的了, 又或者你 通过实例化后的值去缓存这份模板数据,可能结果还是这样。
具体代码可能是这样的:

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) // 创建第一动态表单列表

        // 或者你是这是定义的的, 此时data中没有cacheTemplate这个值, 
        // 这样定义按理说是非响应式的,但实际情况并非如此,在项目中发现它还是会影响其他表单
        vm.cacheTemplate = res.body.data
        this.books.push(res.body.data) // 创建第一动态表单列表
      }, res => {

      })
    },
    add: function () {
      // 此处你会发现你新创建的表单的值会影响其他表单
      // log出来this.cacheTemplate你会发现里面的值已经发生了变换
      this.books.push(this.cacheTemplate)
    }
  }
})

这里this.cacheTemplate的值为什么会发生变换,没有搞明白, 猜测原因可能是变成响应式了,vue中会实时监控跟踪,对vue原理理解好的小伙伴可以评论告诉我原因。

下面说下我的解决方法: 我不管你是不是响应式的,因为是对象,你才能监控到变换,那我把你变成字符串不就好了。
直接上代码:

var vm = new Vue({
  data: {
    books: [],
    cacheTemplate: null
  },
  methods: {
    getForms: function (argument) {
      this.$http.post(url, paras).then(res => {
        // 此处同样缓存了这份模板数据,不同的是把它变成了字符串
        this.cacheTemplate = JOSN.stringify(res.body)
        this.books.push(res.body) // 创建第一动态表单列表
      }, res => {

      })
    },
    add: function () {
      // 此处转化成json对象,你发现this.cacheTemplate中的值是没有变换的。
      var cacheTemplate = JSON.parse(this.cacheTemplate)
      this.books.push(cacheTemplate)
    }
  }
})

这样其他表单值变换的时候都不会影响到我这份模板的数据,问题解决了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
jquery 操作DOM案例代码分享
Apr 05 Javascript
使用jquery实现简单的ajax
Jul 08 Javascript
javascript判断机器是否联网的2种方法
Aug 09 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
微信小程序实现锚点跳转
Nov 23 Javascript
JS创建Tag标签的方法详解
Jun 09 #Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 #Javascript
JS实现的随机排序功能算法示例
Jun 09 #Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 #jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 #jQuery
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 #Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 #Javascript
You might like
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
PHP 无限级分类
2017/05/04 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
JS交换变量的方法
2015/01/21 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
跟老齐学Python之Python安装
2014/09/12 Python
跟老齐学Python之一个免费的实验室
2014/09/14 Python
利用python汇总统计多张Excel
2020/09/22 Python
请解释在new与override的区别
2012/10/29 面试题
生物科学专业个人求职信范文
2013/12/05 职场文书
结婚邀请函范文
2014/01/14 职场文书
工程招投标邀请书
2014/01/26 职场文书
教师对学生的评语
2014/04/28 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
新郎答谢词
2015/01/04 职场文书
捐助感谢信
2015/01/22 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android