VUE-ElementUI----动态增减表单项
<template>
<div>
<el-row>
<el-col :span="12">
<el-form :model="dataform" ref="dataform" label-width="50px">
<div
class="flex"
v-for="(item, index) in dataform.domains"
:key="index"
>
<el-form-item
:label="'name' + index"
:prop="'domains.' + index + '.name'"
>
<el-input v-model="item.name"></el-input>
</el-form-item>
<el-form-item
:label="'sex' + index"
:prop="'domains.' + index + '.sex'"
>
<el-input v-model="item.sex"></el-input>
</el-form-item>
<el-form-item>
<el-button
@click.prevent="removeDomain(item)"
type="danger"
icon="el-icon-delete"
circle
></el-button>
</el-form-item>
</div>
<el-form-item>
<el-button
type="primary"
@click="addDomain"
icon="el-icon-plus"
circle
></el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
dataform: {
domains: [
{
name: "",
sex: "",
},
],
},
};
},
methods: {
removeDomain(item, index) {
console.log(item, index);
var index = this.dataform.domains.indexOf(item);
if (this.dataform.domains.length === 1) {
return false;
}
if (index !== -1) {
this.dataform.domains.splice(index, 1);
}
},
addDomain() {
this.dataform.domains.push({
name: "",
sex: "",
});
},
},
};
</script>
<style>
.flex {
display: flex;
justify-content: space-around;
}
</style>