项目场景:
提示:vue-element动态表单:
例如:项目场景:vue-element动态表单
模板代码
<el-form ref="formBuild" :model="formBuild" label-width="80px">
<el-row>
<el-col :span="24">
<el-form-item label="项目名称">
{{ formBuild.projectName }}
</el-form-item>
</el-col>
</el-row>
<el-row v-for="(item, index) in formBuild.inputOpation" :key="index">
<el-col :span="18">
<el-form-item :label="item.lable" :prop="'inputOpation.' + index + '.name'" :rules="[{ required: true, message: '请输入楼栋名称', trigger: 'blur' }]">
<el-input v-model="item.name" placeholder="请输入楼栋名称" />
</el-form-item>
</el-col>
<el-col :span="2" :offset="1">
<i
@click="deleteRow(index)"
style="font-size: 26px; color: #2e93fd; margin-top: 4px"
class="el-icon-remove-outline"
></i>
</el-col>
<el-col :span="2" v-if="item.showAdd">
<i
@click="addRow"
style="font-size: 26px; color: #2e93fd; margin-top: 4px"
class="el-icon-circle-plus-outline"
></i>
</el-col>
</el-row>
</el-form>
js代码
export default {
data() {
return {
title: "",
openBuild: false,
formBuild: {},
},
created() {
this.rest();
},
methods: {
// 表单重置
reset() {
this.formBuild = {
projectId: undefined,
projectName: undefined,
name: undefined,
id: undefined,
inputOpation: [{projectId:undefined,projectName:undefined, lable: "楼栋", name: "", showAdd: true }],
};
this.resetForm("form");
this.resetForm("formBuild");
this.resetForm("formFloor");
},
deleteRow(index) {
if (this.formBuild.inputOpation.length < 2) {
this.$modal.msgError("不可删除!");
return;
}
this.$modal
.confirm("确定删除此项?")
.then(() => {
this.formBuild.inputOpation.forEach((v, i) => {
if (i === index) {
this.formBuild.inputOpation.splice(i, 1);
}
});
//删除后再次更新
this.formBuild.inputOpation.forEach((v, i) => {
// 始终保持最后一位有showAdd=true
if (i === this.formBuild.inputOpation.length - 1) {
console.log("删除后再次更新",this.formBuild.inputOpation.length - 1);
v.showAdd = true;
}
// 始终保持第一位有lable="楼栋"
if (i === 0) {
v.lable = "楼栋";
}
});
})
.catch(() => {});
},
addRow() {
this.formBuild.inputOpation.forEach((v, i) => {
v.showAdd = false;
v.projectId = this.formBuild.projectId;
v.projectName = this.formBuild.projectName;
});
this.formBuild.inputOpation.push({projectId:this.formBuild.projectId,projectName:this.formBuild.projectName, lable: "", name: "", showAdd: true });
},
}
页面: