摘要：最近項目中遇到的需求是要操作大量的表單，之前的項目中有做過這方的研究，只不過是用來操作。添加操作上面的只是其中一個動態列表。

最近項目中遇到的需求是要操作大量的表單，之前的項目中有做過這方的研究，只不過是用jquery來操作。

先簡單說說以前項目A中的應用場景，可能有小伙伴兒也遇到相同的需求。A項目是公司的OA系統中有的項目，是用java的jsp渲染的頁面，需求是要改成：嵌入APP中顯示，前后端分離， 后端返回的內容，還不能修改， 只是后端同事做了下接口處理，返回給前端的是一大堆的表單數據。

每個表單都有多個字段表示它的屬性：

是否可編輯

表單類型 （text, textarea, select, radio, checkbox, hidden等 ）

與之聯動的其他表單

。。。
之前的方案就是各個表單類型和字段屬性進行判斷，調用不同的UI組件(如時間日歷選擇器等)

現在遇到的項目，展示類型少很多，第一個想到的就是同樣的方法，不過這次使用的是Vue的雙向綁定。

以下是我在python后端項目中的經驗，如果沒有興趣可以直接看最后的動態表單部分

項目B用的是python的jinjia2的模板， 同樣都是 {{}} 去解析數據，這種情況下怎么辦呢？

{% raw %}

{% 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 如何生成動態表單

我們的與后端商量好的數據格式可以是這樣的；

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只是其中一個動態列表。

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)
        }
    }
})

這樣其他表單值變換的時候都不會影響到我這份模板的數據，問題解決了。
如果覺得本文不錯的話，歡迎點贊。如有問題， 大家一起交流和學習