vue2 中如何?動態表單增刪改查執行個體，vue2表單

vue2 中如何?動態表單增刪改查執行個體，vue2表單

最近項目中遇到的需求是要操作大量的表單，之前的項目中有做過這方的研究，只不過是用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)    }  }})

這樣其他表單值變換的時候都不會影響到我這份模板的資料，問題解決了。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。