网站建设公司排行榜,仓库管理系统界面,网络科技公司介绍,辽宁建设工程信息网投标流程在Vue.js项目中#xff0c;表单是与用户交互的重要部分#xff0c;特别是在需要动态管理表单项的场景下#xff0c;如何优雅地实现添加、删除、上移、下移及验证功能变得尤为重要。本文将详细介绍如何使用Element UI来实现一个包含动态表单项管理以及验证功能的表单。
效果…在Vue.js项目中表单是与用户交互的重要部分特别是在需要动态管理表单项的场景下如何优雅地实现添加、删除、上移、下移及验证功能变得尤为重要。本文将详细介绍如何使用Element UI来实现一个包含动态表单项管理以及验证功能的表单。
效果图如下 一、项目背景
假设我们正在开发一个活动管理系统其中一个功能是为活动添加多条路线信息每条路线包含路线名称、可参加人数和路线详情。用户需要能够动态地添加、删除、调整路线顺序并且需要对所有表单项进行验证。
二、实现步骤 项目初始化 首先确保你的Vue项目已经安装了Element UI。如果未安装可以通过以下命令进行安装 npm install element-ui --save 然后在main.js中引入Element UI import Vue from vue;
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css; Vue.use(ElementUI); 模板结构 在组件的template部分使用Element UI的el-form、el-descriptions、el-row、el-col、el-form-item、el-input等组件来构建表单。特别地使用v-for指令来动态渲染表单项并使用slot插槽来添加“新增”按钮。 template !-- 省略了部分代码详细代码见文末 -- /template 数据定义 在data函数中定义表单数据form和验证规则rules。form中包含activityTravelLines数组用于存储路线信息。rules中定义了表单项的验证规则。 data() { return { form: { activityTravelLines: [ { name: , limitNumber: , lineDetail: , rulesId: 0, }, ], //其他字段 }, arrayFieldRulesId: 0, rules: { //其他验证规则 }, };
}, 初始化数据 在created钩子中调用initData方法初始化数据。如果有初始化数据如通过接口获取则遍历activityTravelLines数组为每一项添加rulesId并更新验证规则。 created() { this.initData(); this.updateRules(); // 更新验证规则
},
methods: { initData() { // 省略了部分代码详细代码见文末 }, // 其他方法...
} 动态管理表单项 提供addItem、removeItem、moveUp、moveDown方法来实现表单项的添加、删除、上移、下移功能。每次操作后都需要调用updateRules方法来更新验证规则。 methods: { // 省略了部分代码详细代码见文末 addItem() { // 省略了部分代码详细代码见文末 }, removeItem(index) { // 省略了部分代码详细代码见文末 }, moveUp(index) { // 省略了部分代码详细代码见文末 }, moveDown(index) { // 省略了部分代码详细代码见文末 }, // 其他方法...
} 表单验证 在submit方法中使用this.$refs.form.validate方法来验证表单。如果验证通过则执行提交操作。 methods: { // 省略了部分代码详细代码见文末 submit() { this.$refs[form].validate((valid) { if (valid) { //你的提交代码 console.log(this.form, 提交form表单); } }); },
} 样式定义 使用SCSS来定义表单的样式确保表单项之间的间距和布局合理。 style langscss scoped
.btnCont { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; .titleIndexCont { font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 20px; color: #333333; }
}
/style
三、完整代码
templatediv classcontainerel-form refform :modelform :rulesrules label-width120pxel-descriptions title路线信息 :column2template slotextrael-button typeprimary clickaddItem sizemini新 增/el-button/template/el-descriptionsdivv-for(item, index) in form.activityTravelLines:keyitem.rulesIddiv classbtnContdiv classtitleIndexCont{{ 路线 (index 1) }}/divdivel-buttontypedangericonel-icon-deletesizeminiclickremoveItem(index)/el-buttonel-buttontypesuccessiconel-icon-topsizeminiclickmoveUp(index)/el-buttonel-buttontypesuccessiconel-icon-bottomsizeminiclickmoveDown(index)/el-button/div/divel-rowel-col :span12el-form-itemlabel路线名称::propactivityTravelLines.${index}.nameel-input v-modelitem.name/el-input/el-form-item/el-colel-col :span12el-form-itemlabel可参加人数:propactivityTravelLines.${index}.limitNumberel-inputv-modelitem.limitNumbertypenumber:min0/el-input/el-form-item/el-col/el-rowel-form-itemlabel路线详情::propactivityTravelLines.${index}.lineDetailel-inputv-modelitem.lineDetailtypetextareaplaceholder请输入内容maxlength300:rows5show-word-limit/el-input/el-form-item/div!-- 其他el-form-item --/el-formdiv classfooterel-button typeprimary clicksubmit确 定/el-button/div/div
/template
script
export default {data() {return {form: {activityTravelLines: [{name: ,limitNumber: ,lineDetail: ,rulesId: 0,},],//其他字段},arrayFieldRulesId: 0,rules: {//其他验证规则},};},created() {this.initData();this.updateRules(); // 更新验证规则},mounted() {},methods: {initData() {//如果有初始化数据要遍历form.activityTravelLines在每一项里面添加rulesIdif (this.id) {//假设getTravelDetail是你的详情接口getTravelDetail(this.id).then((res) {this.form res?.data ?? {};this.form.activityTravelLines res?.data?.activityTravelLines ?? [];this.form.activityTravelLines.map((item, index) {item.rulesId index;});this.arrayFieldRulesId this.form.activityTravelLines.length - 1;this.updateRules(); // 更新验证规则});}},// 添加表单项addItem() {this.arrayFieldRulesId;this.form.activityTravelLines.push({name: ,limitNumber: ,lineDetail: ,rulesId: this.arrayFieldRulesId,});this.updateRules(); // 更新验证规则},// 删除表单项removeItem(index) {if (this.form.activityTravelLines.length 1) {this.$message({ message: 不能小于一条路线, type: warning });return;}this.form.activityTravelLines.splice(index, 1);this.updateRules(); // 更新验证规则},// 上移表单项moveUp(index) {if (index 0) {const movedItem this.form.activityTravelLines.splice(index, 1)[0];this.form.activityTravelLines.splice(index - 1, 0, movedItem);this.updateRules(); // 更新验证规则}},// 下移表单项moveDown(index) {if (index this.form.activityTravelLines.length - 1) {const movedItem this.form.activityTravelLines.splice(index, 1)[0];this.form.activityTravelLines.splice(index 1, 0, movedItem);this.updateRules(); // 更新验证规则}},// 更新验证规则updateRules() {// 为每个表单项添加验证规则this.form.activityTravelLines.forEach((item, index) {this.rules[activityTravelLines.${index}.name] [{ required: true, message: 路线名称不能为空, trigger: blur },];this.rules[activityTravelLines.${index}.limitNumber] [{ required: true, message: 可参加人数不能为空, trigger: blur },];});},submit() {this.$refs[form].validate((valid) {if (valid) {//你的提交代码console.log(this.form, 提交form表单);}});},},
};
/script
style langscss scoped
.btnCont {display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px;.titleIndexCont {font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 20px;color: #333333;}
}
/style四、总结
本文详细介绍了如何在Vue.js项目中使用Element UI实现一个包含动态表单项管理以及验证功能的表单。通过动态渲染表单项、管理表单项的顺序、以及进行表单验证我构建了一个灵活且功能强大的表单组件。希望这篇文章能帮助你在项目中更好地处理类似的需求。
