elemenplus form表单的动态配置写法
elementplus form的动态配置写法
模板代码部分
<template>
<div class="card content-box">
<el-alert title="通过 component :is 组件属性 && v-bind 属性透传,可以将 template 中的 html 代码全部改变为 columns 配置项,具体配置请看代码。" type="warning" :closable="false" />
<component :is="'el-form'" v-bind="options.form" ref="proFormRef" :model="formData" :rules="formRules">
<!-- 动态表单 -->
<el-row style="width:100%" :gutter="0">
<template v-for="item in options.columns" :key="item.prop">
<el-col :span="item.formItem.span">
<component :is="'el-form-item'" v-bind="item.formItem">
<component :is="`el-${item.attrs.typeName}`" v-bind="item.attrs" v-model="formData[item.formItem.prop]" />
</component>
</el-col>
</template>
</el-row>
<!-- 提交按钮 -->
<el-form-item>
<el-button type="primary" @click="submitForm(proFormRef)">提交</el-button>
<el-button @click="resetForm(proFormRef)">重置</el-button>
</el-form-item>
</component>
</div>
</template>
ts代码部分
<script setup lang="ts" name="proForm">
import type { FormInstance, FormRules } from "element-plus";
import { checkPhoneNumber } from "@/utils/eleValidate";
import { ElMessage } from "element-plus";
const proFormRef = ref<FormInstance>();
// 表单提交字段
const formData = reactive<Record<string, any>>({
username: "",
password: "",
phone: "",
email: "",
email2: ""
})
// 表单的验证
const formRules = reactive<FormRules>({
phone: [{ required: true, validator: checkPhoneNumber, trigger: "blur" }],
})
// 表单的配置项
const options = ref({
// 表单整体配置项
form: {
labelPosition: "right",
labelWidth: "80px",
size: "default",
labelSuffix: " :",
},
// 表单列配置项 (formItem 代表 item 配置项,attrs 代表 输入、选择框 配置项)
columns: [
{
formItem: { label: "用户名", span: 24, prop: "username", labelWidth: "80px", required: false },
attrs: { typeName: "input", placeholder: "请输入用户名", autofocus: true, clearable: true, disabled: false }
},
{
formItem: { label: "密码", span: 12, prop: "password", class: "data" },
attrs: { typeName: "input", placeholder: "请输入密码", type: "password", clearable: true, }
},
{
formItem: { label: "手机号", span: 24, prop: "phone" },
attrs: { typeName: "input", placeholder: "请输入邮箱", clearable: true }
},
{
formItem: { label: "邮箱", span: 12, prop: "email" },
attrs: { typeName: "input", placeholder: "请输入邮箱", clearable: true }
},
{
formItem: { label: "邮箱", span: 12, prop: "email2" },
attrs: { typeName: "input", placeholder: "请输入邮箱", clearable: true }
}
],
});
// 提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
await formEl.validate((valid, fields) => {
if (valid) {
ElMessage.success("提交的数据为 : " + JSON.stringify(formData));
} else {
console.log("error submit!", fields);
}
});
};
// 充值表单
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.resetFields();
};
</script>
洗尽铅华始见金,褪去浮华归本真