成功vue动态表单实现
<template>
<div class="app-container">
<el-form
:model="dynamicValidateForm"
label-width="120px"
ref="dynamicValidateForm"
>
<el-form-item
:key="domain.name"
:label="domain.label"
:prop="domain.name"
:rules="rules"
v-for="domain in dynamicValidateForm.domains"
>
<el-input
type="money"
:disabled="domain.editable"
autocomplete="off"
v-model.number="domain.value"
>
</el-input>
</el-form-item>
</el-form>
<el-button type="primary" @click="add()">确定添加</el-button>
</div>
</template>
<script>
import { add } from "@/api/test";
export default {
data() {
return {
dynamicValidateForm: {
domains: [
{ name: "username", label: "用户名", value: "", editable: 0 },
{ name: "num1", label: "数量", value: "0", editable: 0 },
],
},
rules: [],
};
},
methods: {
add() {
//先判断表单是否通过了判断
this.$refs.dynamicValidateForm.validate((valid) => {
//代表通过验证 ,将参数传回后台
if (valid) {
let params = Object.assign({}, this.dynamicValidateForm);
var jsonstring = "";
var obj={};
this.dynamicValidateForm.domains.forEach((element) => {
this.$set( obj, element.name, element.value);
});
debugger;
add(obj).then((res) => {
this.$message({
type: "info",
message: res.Message,
});
if (res.Code == 702) {
return;
}
this.$router.push("/patient/TEST/test_list");
});
}
});
},
},
};
</script>
<style scoped>
.line {
text-align: center;
}
</style>