需求原因
- 在需求中大量出现表单,每次重写都有些费时,而且dom会很乱
- 功能基本类似,接受数据回显、发送数据
封装(仅做了常规input兼容)
<template>
<div>
<a-modal
:title="formConfig.name"
:visible="visible"
@cancel="visible = false"
@ok="submit()"
width="600px"
:mask-closable="false"
:keyboard="false"
>
<a-form :form="form">
<a-form-item
v-bind="layout"
v-for="(item,index) in formConfig.item"
:key="index"
:label="item.nameCn"
>
<a-input
v-decorator="[item.name, {
rules: [{required: true, message: `请输入${item.nameCn}`}]
}]"
:disabled="item.disabled"
/>
</a-form-item>
</a-form>
</a-modal>
</div>
</template>
<script>
export default {
props: {
formConfig: {
required: true,
type: Object
}
},
data() {
return {
form: this.$form.createForm(this),
visible: false,
layout: { labelCol: { span: 6 }, wrapperCol: { span: 16 } }
};
},
methods: {
handleOpenForm(obj = []) {
this.form.resetFields();
this.visible = true;
setTimeout(() => {
this.form.setFieldsValue(obj);
}, 100);
},
submit() {
this.form.validateFields((err, values) => {
if (err) {
return;
}
this.$emit('submit', values);
});
}
}
};
</script>
使用示例
<!-- 运维配置表单 -->
<easy-model-form
:form-config="peonForm"
ref="peonForm"
@submit="submit"
/>
const PEON_FORM = [
{
name: 'id',
nameCn: 'id',
disabled: true
}, {
name: 'tenant_id',
nameCn: '租户id',
disabled: true
}, {
name: 'peon_url',
nameCn: 'peon_url',
disabled: false
}
];
data() {
return {
peonForm: {
name: '运维配置表单',
item: PEON_FORM
}
}
}
this.$refs.peonForm.handleOpenForm(res.data);