dynamic-form-vue2
v1.2.5
Published
基于vue2的动态表单组件
Readme
dynamic-form-vue2
介绍
基于vue2+element-ui的动态表单组件库，丰富的表单元素，灵活设计各种表单，支持正则表达示校验，强大的自定义脚本，可实现复杂表单场景。
演示地址
http://cdxming.com/form/
软件架构
vue2+element-ui+json-viewer
安装教程
1. npm install dynamic-form-vue2
2. import DynamicForm from 'dynamic-form-vue2'
3. import 'dynamic-form-vue2/dynamic-form.css'
4. Vue.use(DynamicForm)使用说明
- 表单设计
<template>
<FormDesign @save="save">
<div slot="title" align="center">这是插槽标题</div>
<el-button slot="toolbar" size="mini">插槽按钮</el-button>
</FormDesign>
</template>
<script>
export default {
methods: {
// 保存表单参数
save (data) {
console.log(data)
}
}
}
</script>- 表单展示
<template>
<div>
<el-button type="primary" size="mini" @click="formValidate()">校验表单</el-button>
<el-button type="primary" size="mini" @click="previewGetData()">校验并获取值</el-button>
</div>
<FormPreview ref="dynamicForm" :element-list="elements" :config="formParams"></FormPreview>
</template>
<script>
export default {
name: 'App',
data () {
return {
elements: [
{
"span": 24,
"type": "Input",
"key": "Input_c38b675b4c254ab2adf310a49508e47f",
"label": "单行文本",
"value": "",
"labelWidth": 1,
"model": "Input_b047ba8f94934b38b514bb54f4c1e0bd",
"width": "100",
"parent": "",
"child": [],
"options": {
"defaultValue": {
"type": "STATIC",
"value": ""
},
"placeholder": "",
"disabled": false,
"hidden": false,
"dynamicVisible": false,
"dynamicDisabled": false,
"dynamicVisibleScript": "",
"dynamicVisibleParams": {
"dynamicRuleValue": false,
"rules": [
{
"element": [],
"elementType": "",
"elementOptions": [],
"toggleInput": false,
"inputModel": true,
"rule": "",
"value": ""
}
]
},
"dynamicDisabledScript": "",
"dynamicDisabledParams": {
"dynamicRuleValue": false,
"rules": [
{
"element": [],
"elementType": "",
"elementOptions": [],
"toggleInput": false,
"inputModel": true,
"rule": "",
"value": ""
}
]
},
"type": "text",
"prepend": "",
"append": "",
"clearable": true,
"readonly": false,
"maxLength": 0,
"focusEvent": {
"targetElement": "",
"targetTableRowIndex": -1,
"script": "",
"rules": [
{
"type": 1,
"value": "",
"tableRowIndex": -1
}
]
},
"blurEvent": {
"targetElement": "",
"targetTableRowIndex": -1,
"script": "",
"rules": [
{
"type": 1,
"value": "",
"tableRowIndex": -1
}
]
},
"changeEvent": {
"targetElement": "",
"targetTableRowIndex": -1,
"script": "",
"rules": [
{
"type": 1,
"value": "",
"tableRowIndex": -1
}
]
}
},
"rules": [
{
"required": false,
"message": "必填项",
"trigger": [
"blur",
"change"
]
}
]
}
],
formParams: {
"labelPosition": "top",
"labelWidth": 104,
"size": "medium"
}
}
},
methods: {
formValidate () {
this.$refs.dynamicForm.formValidate().then((result) => {
if (result) {
this.$message({
message: '表单校验通过！',
type: 'success'
})
}
}).catch((error) => {
console.log(error)
})
},
previewGetData () {
this.$refs.dynamicForm.getFormData().then((result) => {
if (result) {
console.log(result)
}
})
}
}
}
</script>联系方式
QQ：281323984