最近項(xiàng)目中遇到的需求是要操作大量的表單，之前的項(xiàng)目中有做過這方的研究述召，只不過是用jquery來操作俘枫。
項(xiàng)目A
先簡(jiǎn)單說說以前項(xiàng)目A中的應(yīng)用場(chǎng)景，可能有小伙伴兒也遇到相同的需求萧恕。A項(xiàng)目是公司的OA系統(tǒng)中有的項(xiàng)目刚梭，是用java的jsp渲染的頁(yè)面，需求是要改成：嵌入APP中顯示票唆，前后端分離朴读， 后端返回的內(nèi)容，還不能修改走趋， 只是后端同事做了下接口處理衅金，返回給前端的是一大堆的表單數(shù)據(jù)。
每個(gè)表單都有多個(gè)字段表示它的屬性：
- 是否可編輯
- 表單類型 （text, textarea, select, radio, checkbox, hidden等 ）
- 與之聯(lián)動(dòng)的其他表單
- 簿煌。氮唯。。
之前的方案就是各個(gè)表單類型和字段屬性進(jìn)行判斷姨伟，調(diào)用不同的UI組件(如時(shí)間日歷選擇器等)
項(xiàng)目B
現(xiàn)在遇到的項(xiàng)目惩琉，展示類型少很多，第一個(gè)想到的就是同樣的方法授滓，不過這次使用的是Vue的雙向綁定琳水。
以下是我在python后端項(xiàng)目中的經(jīng)驗(yàn)，如果沒有興趣可以直接看最后的動(dòng)態(tài)表單部分
1 python 后端項(xiàng)目中如何引入Vue
項(xiàng)目B用的是python的jinjia2的模板般堆， 同樣都是 {{}} 去解析數(shù)據(jù)，這種情況下怎么辦呢诚啃？
{% 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 可以阻止解析內(nèi)部的代碼淮摔，這樣就可以引入我們的vue模板了，這里是我寫的一個(gè)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)
}
})
動(dòng)態(tài)表單組件
一般的需求是：
- 一個(gè)列表和橙，可以實(shí)現(xiàn)列表的動(dòng)態(tài)添加，刪除造垛。
- 列表中的每一項(xiàng)是動(dòng)態(tài)的表單魔招，表單個(gè)數(shù)不確定，
- 有提交功能五辽，提交或者可以保存整個(gè)表單
- 保存的表單办斑，通過接口調(diào)回后，回填表單杆逗，還可以再次修改乡翅、增加、刪除等
1 如何生成動(dòng)態(tài)表單
<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>
我們的與后端商量好的數(shù)據(jù)格式可以是這樣的罪郊；
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: '女'
}]
}]
這樣一個(gè)動(dòng)態(tài)模板就生成了，其他更多類型都可以定義悔橄。這份模板數(shù)據(jù)靶累，一般是需要緩存的腺毫。因?yàn)榻酉聛淼?添加操作也需要這份數(shù)據(jù)。
添加操作
上面的template只是其中一個(gè)動(dòng)態(tài)列表挣柬。
<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: '女'
}]
}]
})
},
這里需要注意的是，如果這份模板的數(shù)據(jù)凛忿，你是通過在data屬性中定義的字段去緩存的澈灼，那有可能遇到的是你通過添加操作之后的表單的值會(huì)，會(huì)隨著其中的某個(gè)表單的值一起聯(lián)動(dòng)店溢。
具體原因叁熔，猜測(cè)是這里的數(shù)據(jù)已經(jīng)是變成響應(yīng)式的了， 又或者你 通過實(shí)例化后的值去緩存這份模板數(shù)據(jù)床牧，可能結(jié)果還是這樣荣回。
具體代碼可能是這樣的：
var vm = new Vue({
data: {
books: [],
cacheTemplate: null
},
methods: {
getForms: function (argument) {
this.$http.post(url, paras).then(res => {
// 此處緩存了這份模板數(shù)據(jù)，cacheTemplate中的數(shù)據(jù)已經(jīng)變成響應(yīng)式的了, 此處cacheTemplate是引用類型
this.cacheTemplate = res.body.data
this.books.push(res.body.data) // 創(chuàng)建第一動(dòng)態(tài)表單列表
}, res => {
})
},
add: function () {
// 因?yàn)槭且妙愋透昕龋詂acheTemplate屬性值的變化必然影響其他和它相同屬性的值
this.books.push(this.cacheTemplate)
}
}
})
此處的解決方法: 是要換成深度復(fù)制心软。
直接上代碼：
var vm = new Vue({
data: {
books: [],
cacheTemplate: null
},
methods: {
getForms: function (argument) {
this.$http.post(url, paras).then(res => {
// 此處同樣緩存了這份模板數(shù)據(jù)，不同的是把它變成了字符串, 深度復(fù)制
this.cacheTemplate = JOSN.stringify(res.body)
this.books.push(res.body) // 創(chuàng)建第一動(dòng)態(tài)表單列表
}, res => {
})
},
add: function () {
// 此處轉(zhuǎn)化成json對(duì)象
var cacheTemplate = JSON.parse(this.cacheTemplate)
this.books.push(cacheTemplate)
}
}
})
如果覺得本文不錯(cuò)的話著蛙，歡迎點(diǎn)贊删铃。如有問題， 大家一起交流和學(xué)習(xí)
