最近項目中遇到的需求是要操作大量的表單，之前的項目中有做過這方的研究，只不過是用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: { 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 如何生成動態表單

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