让我们来详细讲解一下“vue element封装form表单的实现”的完整攻略。
确定需求
在封装form表单之前，需要先确定需求，包括要封装的表单项、表单验证方式等。
安装依赖
使用vue element库来构建我们的表单组件，需要先安装它。可以使用以下命令进行安装：
npm install element-ui -S
创建表单组件
在项目中创建一个新的组件，可以命名为FormComponent。然后在组件中引入element-ui库中的Form、FormItem、Input等组件并使用它们构建表单。
<template>
<el-form ref="form" :model="form" :rules="rules" label-position="top" size="medium">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="form.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: ''
},
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', message: '请输入数字格式的年龄', trigger: 'blur' }
]
}
};
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
console.log('submit form');
} else {
console.log('form validation failed');
return false;
}
});
},
resetForm() {
this.$refs.form.resetFields();
}
}
};
</script>
以上代码中，我们引入了el-form、el-form-item和el-input等组件来构建表单，设置了表单的基本属性和验证规则，增加了提交和重置方法。
封装表单组件
我们可以将表单组件封装为一个可复用的组件。封装时需要传递两个参数：表单项和验证规则。
<!-- FormComponent.vue -->
<template>
<el-form ref="form" :model="form" :rules="rules" label-position="top" size="medium">
<el-form-item v-for="(item, index) in items" :key="item.prop" :label="item.label" :prop="item.prop">
<el-input v-model="form[item.prop]" :placeholder="item.placeholder"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
props: {
items: {
type: Array,
required: true
},
rules: {
type: Object,
required: true
}
},
data() {
return {
form: {}
};
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
console.log('submit form');
} else {
console.log('form validation failed');
return false;
}
});
},
resetForm() {
this.$refs.form.resetFields();
}
}
};
</script>
以上代码中，我们使用了props传递了表单项和验证规则，并使用了v-for指令遍历表单项数组。最终创建了一个可复用的表单组件。
使用封装组件
使用封装的表单组件时，需要在父组件中传递表单项和验证规则。可以使用以下方式：
<template>
<div>
<form-component :items="items" :rules="rules"></form-component>
</div>
</template>
<script>
import FormComponent from './FormComponent.vue';
export default {
components: {
FormComponent
},
data() {
return {
items: [
{
label: '姓名',
prop: 'name',
placeholder: '请输入姓名'
},
{
label: '年龄',
prop: 'age',
placeholder: '请输入年龄'
}
],
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', message: '请输入数字格式的年龄', trigger: 'blur' }
]
}
};
}
};
</script>
以上代码中，在父组件中引入了封装好的表单组件，并传递了表单项和验证规则。
示例说明
示例一
假设我们需要创建一个登录表单，包括用户名和密码。可以使用以下代码：
<!-- LoginPage.vue -->
<template>
<div>
<form-component :items="items" :rules="rules"></form-component>
</div>
</template>
<script>
import FormComponent from './FormComponent.vue';
export default {
components: {
FormComponent
},
data() {
return {
items: [
{
label: '用户名',
prop: 'username',
placeholder: '请输入用户名'
},
{
label: '密码',
prop: 'password',
placeholder: '请输入密码',
type: 'password'
}
],
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
};
}
};
</script>
示例二
假设我们需要创建一个注册表单，包括用户名、密码、确认密码和邮箱。可以使用以下代码：
<!-- RegisterPage.vue -->
<template>
<div>
<form-component :items="items" :rules="rules"></form-component>
</div>
</template>
<script>
import FormComponent from './FormComponent.vue';
export default {
components: {
FormComponent
},
data() {
return {
items: [
{
label: '用户名',
prop: 'username',
placeholder: '请输入用户名'
},
{
label: '密码',
prop: 'password',
placeholder: '请输入密码',
type: 'password'
},
{
label: '确认密码',
prop: 'confirmPassword',
placeholder: '请确认密码',
type: 'password'
},
{
label: '邮箱',
prop: 'email',
placeholder: '请输入邮箱地址'
}
],
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 6, max: 20, message: '用户名长度在6到20个字符之间', trigger: 'blur' },
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度在6到20个字符之间', trigger: 'blur' }
],
confirmPassword: [
{ required: true, message: '请确认密码', trigger: 'blur' },
{ validator: this.validatePassword, trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '邮箱格式不正确', trigger: 'blur' }
]
}
};
},
methods: {
validatePassword(rule, value, callback) {
if (value !== this.form.password) {
callback(new Error('两次输入的密码不一致'));
} else {
callback();
}
}
}
};
</script>
以上是两条示例说明，可以根据实际需求来修改和调整表单项和验证规则。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue element封装form表单的实现 - Python技术站
微信扫一扫 
支付宝扫一扫 