Element UI 表格嵌套表单、输入框、选择框

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)
            }
            this.$message({
    
    
              type: 'success',
              message: '删除成功!'
            })
          }).catch(() => {
    
    
            this.$message({
    
    
              type: 'info',
              message: '已取消删除'
            })
          })
        }
    }
  }
</script>

这是以前做的：点击加一行就会增加一行，点击编辑该行才可以填写修改数据，避免不必要的错误