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=&