在ElementUI的form组件中存在动态添加<input>的方法
http://element-cn.eleme.io/2.3/#/zh-CN/component/form
image.png
将动态<input>简化后的来看一下
image.png
v-for一个list，通过add方法添加list中的一个个体
<div id="app">
<el-button type="primary" plain @click="addEl">添加</el-button>
<el-row>
<el-col :span="24" v-for="(list,index) in lists">
<el-row :gutter="20" class="margins">
<el-col :span="2">
职员{{index+1}}名字
</el-col>
<el-col :span="6">
<el-input type="text" v-model="list.name">
</el-col>
<el-col :span="6">
<el-button type="danger" @click="del(index)">删除信息</el-button>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
tables: [],
lists: [{
name: "",
}],
},
methods: {
addEl: function() {
let cope = {
name: "",
}
this.lists.push(cope);
},
del: function(index) {
this.lists.splice(index, 1);
},
}
});
</script>
