dw网页制作怎么设置背景颜色,西安排名seo公司,宁波专业建网站外包,公司部门祝福语ElementPlus下的form也有新增表单 如果你写H5等没找到合适的 自己也可以进行封装
实现3个代码讲解:1#xff1a;ElementPlus的代码 2#xff1a;自己书写的代码 3#xff1a;自己把2的代码进行封装
1#xff1a;ElementPlus的运行效果 点击提交 1#xff1a;ElementPlus…ElementPlus下的form也有新增表单 如果你写H5等没找到合适的 自己也可以进行封装
实现3个代码讲解:1ElementPlus的代码 2自己书写的代码 3自己把2的代码进行封装
1ElementPlus的运行效果 点击提交 1ElementPlus的代码
templateel-formrefformRef:modeldynamicValidateFormlabel-width120pxclassdemo-dynamicel-form-itempropemaillabelEmail:rules[{required: true,message: Please input email address,trigger: blur,},{type: email,message: Please input correct email address,trigger: [blur, change],},]el-input v-modeldynamicValidateForm.email //el-form-itemel-form-itemv-for(domain, index) in dynamicValidateForm.domains:keydomain.key:labelDomain index:propdomains. index .value:rules{required: true,message: domain can not be null,trigger: blur,}el-input v-modeldomain.value /el-button classmt-2 click.preventremoveDomain(domain)Delete/el-button/el-form-itemel-form-itemel-button typeprimary clicksubmitForm(formRef)提交/el-buttonel-button clickaddDomain新增/el-buttonel-button clickresetForm(formRef)重置/el-button/el-form-item/el-form
/templatescript langts setup
import { reactive, ref } from vue;
import type { FormInstance } from element-plus;const formRef refFormInstance();
const dynamicValidateForm reactive{domains: DomainItem[];email: string;
}({domains: [{key: 1,value: ,},],email: ,
});interface DomainItem {key: number;value: string;
}const removeDomain (item: DomainItem) {const index dynamicValidateForm.domains.indexOf(item);if (index ! -1) {dynamicValidateForm.domains.splice(index, 1);}
};const addDomain () {dynamicValidateForm.domains.push({key: Date.now(),value: ,});
};const submitForm (formEl: FormInstance | undefined) {if (!formEl) return;formEl.validate((valid) {if (valid) {console.log(submit!);console.log(dynamicValidateForm, dynamicValidateForm);} else {console.log(error submit!);return false;}});
};const resetForm (formEl: FormInstance | undefined) {if (!formEl) return;formEl.resetFields();
};
/script
2自己书写的代码 点击提交的打印效果 templatediv classboxtemplate v-for(item, index) in dataForm :keyitem.iddivclassbox-b bg-ffstyledisplay: flex; justify-content: space-betweendivdiv styledisplay: flexdiv class区域位置/divinput v-modelitem.ipchange typetext //divdiv styledisplay: flex; margin-top: 10pxdiv class危险有害因素/divinput typetext v-modelitem.errorText //div/divdivel-button typeprimary clickdeleteClick(item.id)删除/el-button/div/div/templatedivel-button typeprimary clickhandlerClick新增/el-buttonel-button typeprimary clicksubMitClick提交/el-button/div/div
/templatescript setup langts
import { ref, reactive } from vue;
const dataForm reactive([{ id: 1, ipchange: , errorText: },{ id: 2, ipchange: , errorText: },
]);
const handlerClick () {dataForm.push({ id: Date.now(), ipchange: , errorText: });
};
const deleteClick (id: number) {dataForm.forEach((item, index) {item.id id ? dataForm.splice(index, 1) : ;});
};
const subMitClick () {console.log(dataForm, dataForm);
};
/scriptstyle scoped
.bg-ff {background: #fff;
}
.box {width: 30vw;margin: auto;background: #fff;
}
.box-b {padding: 10px;width: 100%;overflow: hidden;box-sizing: border-box;border-radius: 10px;border: 1px solid #000;margin-top: 10px;
}
/style
2的代码量太多 我们都会进行封装
3自己把2的代码进行封装
components/insertForm.vue
templatedivtemplate v-for(item, index) in NewdataForm :keyitem.iddivclassbox-b bg-ffstyledisplay: flex; justify-content: space-betweendivdiv styledisplay: flexdiv class区域位置/divinput v-modelitem.ipchange typetext //divdiv styledisplay: flex; margin-top: 10pxdiv class危险有害因素/divinput typetext v-modelitem.errorText //div/divdivel-button typeprimary clickdeleteClick(item.id)删除/el-button/div/div/template/div
/templatescript setup langts
import { ref, reactive, watch } from vue;
const emit defineEmits([deleteClick]);
const define withDefaults(defineProps{ dataForm: any[] }(), {dataForm: () [{ id: 1, ipchange: , errorText: },{ id: 2, ipchange: , errorText: },],
});//1: 这样不可以的; 下面的watch监听进行赋值的时候 NewdataFormnewvalue不可整体的赋值这个
// reactive 只能赋值到它下的某个属性下
//1: let errors reactive( [...define.dataForm] );
// 2:但是使用这个 太麻烦
// 2:let NewdataForm reactive({ dataForm: [...define.dataForm] });
// 3:使用 ref这个 可以直接赋值
let NewdataForm ref([...define.dataForm]);watch(define.dataForm, (newvalue) {// errorsnewvalue //错误的写法 如上1:// NewdataForm.dataFormnewvalue;可以正常运行如上2:NewdataForm.value newvalue;
});
const deleteClick (id: number) {emit(deleteClick, id);
};
defineExpose({ NewdataForm });
/scriptstyle scoped
/style主文件引入 templatediv classboxdivinsertFormrefinsertFormRef:dataFormdataFormdeleteClickdeletenewClick/insertFormel-button typeprimary clickhandlerClick新增/el-buttonel-button typeprimary clicksubMitClick提交/el-button/div/div
/templatescript setup langts
import insertForm from /components/insertForm/index.vue;import { ref, reactive } from vue;
const insertFormRef refInstanceTypetypeof insertForm();
var dataForm ref([{ id: 1, ipchange: , errorText: },{ id: 2, ipchange: , errorText: },
]);
const handlerClick () {dataForm.value.push({ id: Date.now(), ipchange: , errorText: });
};
const deletenewClick (id: number) {dataForm.value.forEach((item, index) {item.id id ? dataForm.value.splice(index, 1) : ;});
};
const subMitClick () {dataForm.value insertFormRef.value.NewdataForm;console.log(dataForm.value, dataForm);
};
/scriptstyle
.bg-ff {background: #fff;
}
.box {width: 30vw;margin: auto;background: #fff;
}
.box-b {padding: 10px;width: 100%;overflow: hidden;box-sizing: border-box;border-radius: 10px;border: 1px solid #000;margin-top: 10px;
}
/style
效果一样 *
大多数人的疑问 我新增的input的vmodel绑定的值 和之前的表单一样的 都是ipchange: “”, errorText: “” 就是这样的 发给后端后端自己判断即可
