🎯用于json动态生成表单
只包含文本,文本域,单选,多选,更复杂的可自行修改
基于:element-plus2.0,vue3(用了options语法)
form-creater组件代码
主要传递3个参数
config:数组
rules:对象,校验规则和element-plus一致
moduleValue:对象
使用方法参考下面
<template>
<div>
<el-form ref="form" :model="simForm" label-width="auto" :rules="rules" style="max-width: 600px">
<template v-for="item in config" :key="item.id">
<!-- 文本 -->
<el-form-item v-if="item.type === 'input'" :label="item.title" :prop="item.field">
<el-input v-model="simForm[item.field]" clear />
</el-form-item>
<!-- 文本域 -->
<el-form-item v-if="item.type === 'textarea'" :label="item.title" :prop="item.field">
<el-input v-model="simForm[item.field]" :rows="2" type="textarea" clear />
</el-form-item>
<!-- 单选框 -->
<el-form-item v-if="item.type === 'radio'" :label="item.title" :prop="item.field">
<el-radio-group v-model="simForm[item.field]">
<el-radio v-for="radio in item.children" :value="radio.value" :key="radio.id">{{ radio.label }}</el-radio>
</el-radio-group>
</el-form-item>
<!-- 多选框 -->
<el-form-item v-if="item.type === 'checkbox'" :label="item.title" :prop="item.field">
<el-checkbox-group v-model="simForm[item.field]">
<el-checkbox v-for="checkbox in item.children" :value="checkbox.value" :key="checkbox.id">{{ checkbox.label }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</template>
<el-form-item>
<slot name="footer"></slot>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'formCreater',
props: {
config: {
type: Array,
default: () => { return [] }
},
rules: {
type: Object,
default: () => { return {} }
},
moduleValue: {
type: Object,
default: () => { return {} }
}
},
data() {
return {
simForm: Object.assign({}, this.moduleValue)
}
},
mounted() {
this.config.forEach(element => {
this.simForm[element.field] = element.default
});
},
watch: {
simForm: {
handler(value) {
this.$emit("update:moduleValue", value)
},
deep: true
}
},
methods: {
//验证规则
validate() {
let that = this
return new Promise((res, rej) => {
that.$refs.form.validate((valid) => {
if (valid) {
res('success')
} else {
rej('验证不通过')
}
})
})
}
}
}
</script>
使用方法
<template>
<div>
<formCreater ref="form" v-model:moduleValue="form" :config="config" :rules="rules">
<template #footer>
<el-button type="primary" @click="submit('form')">提交</el-button>
</template>
</formCreater>
</div>
</template>
<script>
import formCreater from "@/components/form-creater";
export default {
name: 'HomeView',
components: {
formCreater
},
data() {
return {
config: [
{
type: 'input',
field: 'goods_name',
title: '商品名称',
default: ''
},
{
type: 'textarea',
field: 'good_desc',
title: '商品描述',
default: ''
},
{
type: 'radio',
field: 'good_cart',
title: '商品菜单',
default: '',
children:[
{value:1,label:'水煮鱼'},
{value:2,label:'水煮肉片'}
]
},
{
type: 'checkbox',
field: 'good_fav',
title: '爱好',
default: [],
children:[
{value:1,label:'篮球'},
{value:2,label:'足球'}
]
}
],
form: {},
rules: {
goods_name: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }]
}
}
},
methods: {
submit(ref){
let that=this
this.$refs[ref].validate().then(()=>{
console.log('form',that.form)
}).catch(err=>{
console.log(err)
})
}
}
}
</script>
<style lang="scss" scoped>
</style>