|
<template>
<div class="app-container">
<el-form ref="form" :model="form" label-width="120px">
<!-- 动态生成 -->
<div
class="moreRulesIn"
v-for="(item, index) in MoreDynamicObject"
:key="item.key"
>
<el-form-item
label="姓名"
prop="name"
>
<el-input
v-model="item.name"
placeholder="请输入姓名"
class="el-select_box"
></el-input>
</el-form-item>
<el-form-item
label="电话"
prop="phone"
>
<el-input
v-model="item.phone"
placeholder="请输入电话"
class="el-select_box"
></el-input>
</el-form-item>
<el-button @click="deleteRules(item, index)">删除</el-button>
</div>
<el-form-item style="text-align: center">
<el-button @click="addUser">添加</el-button>
<el-button type="primary" @click="add()">确定添加</el-button>
<el-button type="primary" @click="GetData()">获取数据</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {},
MoreDynamicObject: [
{
name: "",
phone: "",
},
],
};
},
mounted() {
this.MoreDynamicObject = [];
},
methods: {
addUser() {
this.MoreDynamicObject.push({
name: "",
phone: "",
});
},
deleteRules(item, index) {
this.index = this.MoreDynamicObject.indexOf(item);
if (index !== -1) {
this.MoreDynamicObject.splice(index, 1);
}
},
GetData() {
this.MoreDynamicObject.forEach((element) => {
var value = element.name;
debugger;
});
},
add() {
//先判断表单是否通过了判断
this.$refs.form.validate((valid) => {
//代表通过验证 ,将参数传回后台
if (valid) {
debugger;
}
});
},
},
};
</script>
<style scoped>
.line {
text-align: center;
}
</style>
|
