Element UI 表格嵌套表单、输入框、选择框
有时候我们需要一次添加多条数据，这个时候我们就可以使用表格嵌套表单、输入框和选择框等等的方式，添加保存和修改数据。
直接展示代码
<el-form ref="form" :model="form.item"><el-table :data="data"><el-table-column type="index" label="序号"></el-table-column><el-table-column label="车辆牌照"><template slot-scope="scope"><el-select v-if="editNum == scope.$index" v-model="scope.row.carNumber"><el-option v-for="item in carNumbers":label="item.label":value="item.value":key="item.value"></el-option></el-select></template></el-table-column><el-table-column label="通行费（元）"><template slot-scope="scope"><el-input v-if="editNum == scope.$index" v-model="scope.row.toll" clearble/></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button @click="editNum == scope.$index">编辑</el-button><el-button @click="delList(scope.row,scope.$index)">删除</el-button></template></el-table-column></el-table><el-button @click="addList">加一行</el-button></el-form><script>export default {data() {return {form: {name: '',id: '',item: [],removeIdList:[],}}},methods: {//加一行addList(){this.form.item.push({carNumber:'',toll:'',});},//删除数据delList（item,index){this.$confirm("是否确认删除？","提示",{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.form.item.splice(index,1)if(item.id){//如果是在修改的时候删除其中一个数据，则保存Id，方便后端做删除操作this.form.removeIdList.put(item.id);}}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});}}}</script>
这是以前做的：点击加一行就会增加一行，点击编辑该行才可以填写修改数据，避免不必要的错误
表格嵌套表单，制作中
