1. New construction
1. Clarify the idea. There are various types of form forms, common ones include input, select, radio, checkbox, time, date, date-picker, textarea, rate, etc.
<template>
<el-form ref="form" :model="formData" label-width="80px">
<el-form-item
v-for="item in formList"
:key=""
:label=""
:prop=""
>
<div class="form-item-container">
<template v-if="">
<span class="prefix">{{ }}</span> --Pre-unit unit
</template>
<template v-if=" === 'input'">
<el-input
v-model="formData[]"
:placeholder=""
:clearable=""
:maxlength=""
@change="handleChange(, formData[])"
/>
</template>
<template v-if=" === 'textarea'">
<el-input
type="textarea"
v-model="formData[]"
:placeholder=""
:clearable=""
:maxlength=""
@change="handleChange(, formData[])"
/>
</template>
<template v-if=" === 'select'">
<el-select
v-model="formData[]"
:placeholder=""
:clearable=""
@change="handleChange(, formData[])"
>
<el-option
v-for="option in "
:key=""
:label=""
:value=""
/>
</el-select>
</template>
<!-- The same applies to other form items -->
<template v-if="">
<span class="suffix">{{ }}</span> --Rear
</template>
</div>
<div class="form-item-unit" v-if="">{{ }}</div> --unit
</el-form-item>
<div class="form-body" v-if="!$">
<slot></slot>
</div>
<div class="form-footer" v-if="$">
<slot name="footer"></slot>
</div>
<div class="form-footer" v-else>
<el-form-item>
<el-button type="primary" @click="onSubmit" v-if="showSubmitButton">submit</el-button>
<el-button @click="onCancel" v-if="showCancelButton">Cancel</el-button>
</el-form-item>
</div>
</el-form>
</template>
<script>
export default {
props: {
formList: {
type: Array,
required: true,
},
formData: {
type: Object,
default: () => ({}),
},
actionUrl: {
type: String,
required: true,
},
showSubmitButton: {
type: Boolean,
default: true,
},
showCancelButton: {
type: Boolean,
default: true,
},
},
methods: {
handleChange(prop, value) {
this.$emit('update:formData', {
...,
[prop]: value,
});
},
onSubmit() {
this.$((valid) => {
if (valid) {
this.$(, ).then((res) => {
this.$emit('submit-success', res);//Callback });
} else {
this.$('Please check if the form is filled in correctly');
}
});
},
onCancel() {
this.$emit('cancel');
},
},
};
</script>
<style>
.form-item-container {
position: relative;
display: inline-block;
}
.prefix,
.suffix {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
}
.prefix {
left: 8px;
}
.suffix {
right: 8px;
}
.form-item-unit {
display: inline-block;
margin-left: 8px;
color: #909399;
}
.form-body {
margin-bottom: 20px;
border: 1px solid #e4e7ed;
border-radius: 4px;
padding: 20px;
}
.form-footer {
text-align: right;
margin-top: 20px;
}
</style>2. How to use
Introduce import formComponent from 'xx';
<template>
<div>
<form-component
:form-list="formList"
:form-data="formData"
:action-url="actionUrl"
:show-submit-button="true"
:show-cancel-button="true"
@submit-success="onSubmitSuccess"
@cancel="onCustomCancel"
>
<!-- Customize form content -->
<template #default>
<el-form-item>
<el-radio-group v-model="">
<el-radio label="male">male</el-radio>
<el-radio label="female">female</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-cascader
v-model=""
:options="addressOptions"
placeholder="Please select an address"
@change="handleChange('address', formData['address'])"
/>
</el-form-item>
<el-form-item>
<el-input
v-model=""
placeholder="Please enter your email"
clearable
@change="handleChange('email', formData['email'])"
/>
</el-form-item>
</template>
<!-- Custom bottom button，You can also not add it，Use the default bottom button -->
<template #footer>
<el-button type="primary" @click="onCustomSubmit">submit</el-button>
<el-button @click="onCustomCancel">Cancel</el-button>
</template>
</form-component>
</div>
</template>
<script>
import FormComponent from './';
export default {
components: {
FormComponent,
},
data() {
return {
formList: [
{
label: 'Name',
prop: 'name',
type: 'input',
placeholder: 'Please enter your name',
clearable: true,
maxlength: 20,
},
{
label: 'gender',
prop: 'gender',
type: 'select',
placeholder: 'Please choose gender',
clearable: true,
options: [
{
label: 'male',
value: 'male',
},
{
label: 'female',
value: 'female',
},
],
},
{
label: 'address',
prop: 'address',
type: 'cascader',
placeholder: 'Please select the address',
clearable: true,
options: [],
},
{
label: 'Email',
prop: 'email',
type: 'input',
placeholder: 'Please enter your email',
clearable: true,
maxlength: 50,
},
],
formData: {
name: '',
gender: '',
address: [],
email: '',
},
addressOptions: [
{
value: 'beijing',
label: 'Beijing',
children: [
{
value: 'haidian',
label: 'Haidian District',
children: [
{
value: 'zizhuqiao',
label: 'Purple Bamboo Bridge',
},
{
value: 'xizhimen',
label: 'Xizhimen',
},
],
},
{
value: 'chaoyang',
label: 'Chaoyang District',
children: [
{
value: 'guomao',
label: 'International Trade',
},
{
value: 'cbd',
label: 'CBD',
},
],
},
],
},
{
value: 'shanghai',
label: 'Shanghai',
children: [
{
value: 'xuhui',
label: 'Xuhui District',
children: [
{
value: 'xujiahui',
label: 'Xu Jiahui',
},
],
},
{
value: 'pudong',
label: 'Pudong New Area',
children: [
{
value: 'lujiazui',
label: 'Lujiazui',
},
],
},
],
},
],
actionUrl: '/api/submit-form',
};
},
methods: {
onCustomSubmit() {
// Customize the click event of the submit button },
onCustomCancel() {
// Customize the click event of the cancel button },
onSubmitSuccess(res) {
// Callback function for successful form submission },
},
};
</script>This is the end of this article about the implementation of vue element encapsulating form. For more related contents of vue element encapsulating form, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!