element-plus 动态添加表单并绑定校验规则（进阶版）

<div v-for="(item,index) in form.sensorList" :key="index" style="width: calc(100% - 60px);position: relative;">
	<div class="cgq_pie" style="width: 100%;display: flex;">
		<el-row :gutter="20">
			<el-col :span="6">
				<el-form-item label="传感器归属:" :prop="`sensorList[${index}].sensorOwner`">
					<el-select @change="changeSensorOwner(index)" :disabled="item.disbaled" v-model="form.sensorList[index].sensorOwner" placeholder="请选择传感器归属">
						<el-option v-for="it in sensorOwnerList" :key="it.seq"  :disabled="addSensorOwnerList.indexOf(it.seq)!=-1"
						 :label="it.pname" :value="it.seq" />
					</el-select>
				</el-form-item>
			</el-col>
			
			<el-col :span="6">
				<el-form-item  :prop="`sensorList[${index}].sseq`" :rules="rules2[index][0]">
					<template #label>
						<span> 传感器序号 <span style="color: red;">
						（注：输入范围{{item.start}}~{{item.end}}）
						</span></span>
					</template>
					<el-input :disabled="item.disbaled" v-model="form.sensorList[index].sseq" placeholder="请输入传感器序号" />
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="传感器类型:" :prop="`sensorList[${index}].sensortype`">
					<el-select :disabled="item.disbaled" v-model="form.sensorList[index].sensortype" placeholder="请选择传感器类型">
						<el-option v-for="it in typeList" :key="it.type" :disabled="it.disabled"
							:label="it.typeName" :value="it.type" />
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="传感器编号:" :prop="`sensorList[${index}].scode`" :rules="rules2[index][1]">
					<el-input :disabled="item.disbaled" v-model="form.sensorList[index].scode" placeholder="请输入传感器编号" />
				</el-form-item>
			</el-col>
			<el-col :span="6" v-if="form.stype==3">
				<el-form-item label="&nbsp;">
					<el-button v-if="!item.disbaled"  type="primary"  @click="addSensor(index)">
						<span style="margin-left: 2px;">提交</span>
					</el-button>
					<el-button v-if="item.disbaled" type="danger" class="del_btn" plain @click="deleteSensor(index)">
						<span style="margin-left: 2px;">删除</span>
					</el-button>
				</el-form-item>
			</el-col>
		</el-row>
	</div>
	<div style="width: 60px;position: absolute;right: -60px;top: 30px;">
		<div v-if="form.stype==5">
			<el-button v-if="!item.disbaled"  type="primary"  @click="addSensor(index)">
				<span style="margin-left: 2px;">提交</span>
			</el-button>
			<el-button v-if="item.disbaled" type="danger" class="del_btn" plain @click="deleteSensor(index)">
				<span style="margin-left: 2px;">删除</span>
			</el-button>
		</div>
	</div>
</div>

•  注意点：此时rules绑定在el-form-item不是el-form

rules2: [
	[
		[{
			required: true,
			message: '请输入传感器序号',
			trigger: 'blur',
		}],
		[{
			required: true,
			message: '请输入传感器编号',
			trigger: 'blur',
		}, {
			validator: this.checkScode
		}]
	]
], 
sensorList: [{
	scode: "",
	sensortype: "1",
	sseq: "0",
	start: 0,
	pseq: -1,
	end: 100,
	disbaled: false
}],

1、动态添加表单绑定规则

let start = 0;
let end = 0;
let sensortype = "0";
if(currentSseqList.length!=0){
	if(currentSseqList[0].seq=="-1"){
		start = 0;
		end = 100;
		sensortype = "0";
	}else{
		start = 100 + currentSseqList[0].seq*32 + 1;
		end = 100 + currentSseqList[0].seq*32 + 32;
		sensortype = "2";
	}
	this.form.sensorList.push({
		sseq: "", //传感器序号
		scode: "",//传感器编号
		sensortype: sensortype, //传感器类型
		start: start, //序号取值范围
		end: end, //序号取值范围
		sensorOwner: String(currentSseqList.length==0?"":currentSseqList[0].seq) //传感器归属
	});
	
	this.rules2.push([]);
	this.rules2[this.rules2.length-1] = [
		[
			{ required: true, message: '请输入传感器序号', trigger: 'blur' },
			{ validator: this.checkSseq},
		],
		[
			{required: true, message: '请输入传感器编号',trigger: 'blur' },
			{ validator: this.checkScode }
		]
	];
}
checkSseq(rule, value, callback) {
	var reg = /^\d+(\.\d+)?$/;
	var index = rule.field.match(/\d+/)[0];
	var seqUsedList = this.sensorOwnerList.filter(x=>{ return x.seq == this.form.sensorList[index].sensorOwner })[0].seqUsedList;
	var sensor = this.form.sensorList[index];
	if(value && !reg.test(value)){
		return callback(new Error('传感器序号只能输入数字'));
	}else if(sensor.start > Number(value) || sensor.end < Number(value) ){
		return callback(new Error(`传感器序号只能输入${sensor.start}~${sensor.end}数字`));
	}else if( !sensor.disbaled && seqUsedList.indexOf(Number(value))!=-1){
		return callback(new Error('同一个传感器归属下，传感器序号不能重复'));
	}else {
	  callback()
	}
},

注意点：此时的校验规则跟动态添加的数据中的start和end绑定，所以每一行数据的校验规则都不一样，因为之前校验规则是根据序号index绑定的，所以删除之后，后面的元素序号index会往前一位，绑定的规则就变成之前元素的规则

2、删除元素，刷新规则

//删除规则
this.rules2.splice(index, 1);
//删除表单数据
this.form.sensorList.splice(index, 1);
//重置校验
this.$nextTick(() => {
	this.form.sensorList.forEach((_, i) => {
		this.$refs.addUserForm2.validateField(`sensorList[${index}].sseq`);
		this.$refs.addUserForm2.validateField(`sensorList[${index}].scode`);
	});
});