}
}
},
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只是其中一个动态列表。
<div v-for="book in books">
<template v-for="item in book.lists">
......
</template>
</div>
