vue表单中动态添加输入框的方法

vue表单中动态添加输入框的方法2019-12-20

1.数据格式

2.要动态添加的部分循环

3.点击添加时向数组中添加新对象

4.删除

效果

<template>

<el-form :model="formData" :rules="formRules" ref="form">

<el-form-item v-for="(item, index) in formConfig" :label="item.label" :key="index">

<template v-if="item.type === 'input'">

<el-input v-model="formData[item.field]" :placeholder="item.placeholder" @input="handleInput(item.field)" />

</template>

<template v-else-if="item.type === 'select'">

<el-select v-model="formData[item.field]" placeholder="请选择" @change="handleSelect(item.field)">

<el-option v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value" />

</el-select>

</template>

<!-- 其他表单元素类型 -->

</el-form-item>

</el-form>

</template>

<script>

export default {

data() {

return {

formConfig: [], // 表单数据结构

formData: {}, // 表单数据

formRules: {} // 表单验证规则

}

},

methods: {

handleInput(field) {

// 处理输入框 input 事件

},

handleSelect(field) {

// 处理下拉框 change 事件

}

// 其他事件处理函数

}

}

</script>

$formCreate 参数

rules 表单生成规则 [inputRule,selectRule,...]

options 初始化配置参数 (详细见底部 createOptions)

$formCreate.maker 组件规则生成器

除hidden外,其他配置方式全部相同.详细参考表单元素规则

props,event,slot传入参数为对象,例({key:value,...})

validate,options参入参数为数组,例([options,options,..])

hidden 生成隐藏字段

1   $formCreate.maker.hidden(field,value)   

input 生成input输入框

1   $formCreate.maker.input(title,field,value)   

radio 生成单选框

checkbox 生成复选框

select 生成select选择器

switch 生成switch开关

datepicker 生成日期选择器组件,别名date

timepicker 生成时间选择器组件,别名time

inputnumber 生成数字输入框,别名number

colorpicker 生成颜色选择器组件,别名color

cascader 生成多级联动组件

upload 生成上传组件

rate 生成评分组件

slider 生成滑块组件

$f 实例方法

formData() 获取表单的value

getValue(field) 获取指定字段的value

changeField(field,value) 修改指定字段的value

resetFields() 重置表单

destroy() 销毁表单

removeField(field) 删除指定字段

fields() 获得表单所有字段名称

submit() 表单验证通过后提交表单,触发onSubmit事件

validate(successFn,errorFn) 表单验证,如果验证通过执行successFn,未通过则执行errorFn

validateField(field,callback) 表单验证指定字段

---