element el-table实现表格动态增加/删除/编辑表格行，带校验规则

本篇文章记录el-table增加一行可编辑的数据列，进行增删改。

1.增加空白行

直接在页面mounted时对form里面的table列表增加一行数据，直接使用push() 方法增加一列数据这个时候也可以设置一些默认值。比如案例里面的 产品件数 。

	mounted() {this.$nextTick(() => {this.addFormData.productList.push({productName: '',//产品名称price: '',//单价(元/㎡)productCount: '1', //产品件数totalAmount: '', //小计￥元})})},

2.产品名称选中拿到数据展示到列表行

因为当前案例的产品名是下拉选择的，所以我们要请求接口拿到数据渲染到下拉列表，这里直接使用了假数据。

	data() {return {addFormData: {// 产品列表productList: [],},addFormRules: {productName: [{required: true,message: '请选择产品',trigger: 'blur'}],price: [{required: true,message: '请输入单价',trigger: 'blur'}],productCount: [{required: true,message: '请输入产品件数',trigger: 'blur'}]},optionsList: [{id:1,productName:'橘子',price:'10',},{id:2,productName:'苹果',price:'8',}]}},<el-form ref="addFormRef" :model="addFormData" :rules="addFormRules" size="mini" :inline="true"><el-table tooltip-effect="light" :data="addFormData.productList" ><el-table-column label="产品名称" prop="productName" min-width="150"><template slot-scope="scope"><el-form-item size="mini" :prop="'productList.' + scope.$index + '.productName'":rules="addFormRules.productName" class="all"><el-select v-model="scope.row.productName" filterable value-key="id" placeholder="请选择"@change="pestChange($event, scope.$index)"><el-option v-for="item in optionsList" :key="item.id" :label="item.productName":value="item"></el-option></el-select></el-form-item></template></el-table-column><el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"width="150"><template slot-scope="scope"><el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateYes(scope.row)"v-hasPermi="['system:order:edit']">增加</el-button><el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteProduct(scope.row)"v-hasPermi="['system:order:remove']">删除</el-button></template></el-table-column></el-table><el-form-item size="large"><el-button type="primary" @click="handleSubmitAdd">提交</el-button><el-button @click="handleCancelAdd">取消</el-button></el-form-item></el-form>pestChange(e, index) {//此时的e 就是optionsList中的某一项//让后解构赋值给我们这一行对应的值 let data = this.addFormData.productList[index]Object.keys(data).forEach(key => {data[key] = e[key]})this.addFormData.productList[index].productCount = 1},

3.小计通过(计算属性计算值)

		<el-form ref="addFormRef" :model="addFormData" :rules="addFormRules" size="mini" :inline="true"><el-table tooltip-effect="light" :data="addFormData.productList" ><el-table-column label="小计￥元" prop="totalAmount" width="100"><template slot-scope="scope"><div class="notext">{{ getTotalAmount(scope.row) }}</div></template></el-table-column><el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"width="150"><template slot-scope="scope"><el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateYes(scope.row)"v-hasPermi="['system:order:edit']">增加</el-button><el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteProduct(scope.row)"v-hasPermi="['system:order:remove']">删除</el-button></template></el-table-column></el-table><el-form-item size="large"><el-button type="primary" @click="handleSubmitAdd">提交</el-button><el-button @click="handleCancelAdd">取消</el-button></el-form-item></el-form>

	computed: {getTotalAmount(){return (data) => {//先判断单价和数量必须存在if (data.productCount && data.price) {data.totalAmount = parseInt(data.productCount) * parseInt(parseFloat(data.price))return data.totalAmount} else {return 0.00}}}},

4.再增加一行复用上一行的数据

		handleUpdateYes(row) {//拿到上一行数据再往数组中push（）新的数据this.addFormData.productList.push({productName: row.productName,//产品名称price: row.price,//单价(元/㎡)productCount: row.productCount, //产品件数totalAmount: '', //小计￥元})},

5.删除某一行

		// 删除产品handleDeleteProduct(row) {this.$confirm('此操作将永久删除该产品信息, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$message({type: 'success',message: '删除成功!'});this.addFormData.productList.splice(row.index, 1)}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});},

6.点击提交对表单校验

		// 添加订单表单提交handleSubmitAdd() {this.$refs.addFormRef.validate(async (valid) => {if (!valid) return//校验通过 往下执行})},