需求

项目中需要提供一个动态表单，如图：

当我点击添加时，便添加一行；点击右边的删除时，便删除这一行。

至少要有一行数据，但是没有上限。

思路

这种每一行的数据固定，但是不定行数的，很容易想到使用el-table来实现，它可以循环读取:data所绑定的数组，来生成行数据，不同的是：

1、table里面的每一个cell，需要放置一个input来支持用户编辑。

2、最后一列放置两个button，响应用户添加或删除行的需求

实现

data

managerList:[{userId:undefined,nickName:undefined,phonenumber:undefined
}],

template 

因为要求至少有一行数据，所以删除按钮增加一个判断，v-if="managerList.length > 1"，当只剩一行数据时，删除按钮隐藏，不允许再点击

<el-table :data="managerList">        <el-table-column label="姓名" align="center" prop="nickName"><template slot-scope="scope"><el-input v-model.trim="scope.row.nickName" placeholder="请输入项目经理姓名"/></template></el-table-column><el-table-column label="电话号码" align="center" prop="phonenumber"><template slot-scope="scope"><el-input v-model.trim="scope.row.phonenumber" placeholder="请输入电话号码"/></template></el-table-column><el-table-column label="操作" align="center" prop="status"><template slot-scope="scope"><el-link type="primary" icon="el-icon-plus" :underline="false" @click="addRow">新增</el-link><el-link type="primary" icon="el-icon-delete-solid" :underline="false" @click="deleteRow(scope.$index,scope.row)"v-if="managerList.length > 1">删除</el-link></template></el-table-column></el-table>

methods

input不需要特殊处理。但是两个按钮要响应用户操作：

新增

当点击新增时，希望增加一行。基于Vue的响应式原理，data中的managerList数组增加一项即可，使用managerList.push;

addRow(){let manager = {userId:undefined,nickName: undefined,phonenumber: undefined};this.managerList.push(manager);
},

删除

当点击删除时，希望减少一行，同理，managerList中该行数据删除：

deleteRow(index,row){this.managerList.splice(index, 1);
},

如果这里全部都是新增数据，这样就可以了，但是，如果其中有初始数据，而删除的数据又是初始数据的话，需要记录哪个数据要被删除，以便保存时进行真正的数据删除

deleteRow(index,row){this.managerList.splice(index, 1);//获取被删除的用户id，以便保存时将账户状态置为禁用if(row.userId != "" && row.userId != undefined){this.delUsers.push(row);}
},

数据校验

validateInput(){for (let i = 0; i < this.managerList.length; i++) {this.managerList[i].nickName = this.managerList[i].nickName.trim();if (this.managerList[i].nickName === undefined || this.managerList[i].nickName === ""|| this.managerList[i].nickName === null|| this.managerList[i].phonenumber === undefined || this.managerList[i].phonenumber === "" ||this.managerList[i].phonenumber === null) {this.msgError(`第 ${i + 1} 项姓名或手机号码不能为空`);return false;}const regex = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;if (!regex.test(this.managerList[i].phonenumber)) {this.msgError(`第 ${i + 1} 项电话号码格式错误`);return false;}//判断重复项for (let j = 0; j < i; j++) {if (this.managerList[j].nickName === this.managerList[i].nickName &&this.managerList[j].phonenumber === this.managerList[i].phonenumber) {this.msgError(`第 ${i + 1} 项"${this.managerList[i].nickName}"重复添加`);return false;}}}return true;},

保存

submitManagerList(){if(this.validateInput()){this.removeManagers();this.addOrUpdateManagers();        }
},

至此，可以由用户自己控制行数的动态表格就完成了。