elementui table 动态列表、弹框动态输入、校验

<el-table :data='tableData' style='width: 100%' height='100%' class='tabClass'>
	<el-table-column prop='nickName' label='姓名' show-overflow-tooltip></el-table-column>
	<el-table-column show-overflow-tooltip v-for="(col,index) in cols" :key="index" :prop="col.fieldName"
		:label="col.fieldLabel">
	</el-table-column>
	<el-table-column label='操作' width='130'>
		<template slot-scope='scope'>
			<div class='button edit' @click='handleEdit(scope.row)'>
				<span>修改</span>
			</div>
		</template>
	</el-table-column>
</el-table>
<el-dialog :close-on-click-modal="false" title="修改数据" width="700px" class="leave-info"
	:visible.sync="balanceOpen">
	<el-form :model="formObj" ref='formName'>
		<el-row :gutter="20">
			<el-col :span="24">
				<el-form-item label="时间" label-width="100px">
					<el-date-picker style="width: 100%;" type="date" format="yyyy-MM-dd"
						value-format="yyyy-MM-dd" v-model="formObj.workDate" placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="12" v-for="(item,i) in formObj.days.length" :key="i">
				<el-form-item :label="formObj.days[i].leaveTypeName" label-width="100px"
					:prop="formObj.days[i].leaveType" :key='i'>
					<el-input :data-index="i" v-model="formObj.days[i].leaveBalance"
						:placeholder="'请输入'+formObj.days[i].leaveTypeName"></el-input>
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
	<div slot="footer" class="dialog-footer">
		<el-button @click="balanceOpen=false" size="mini">关 闭</el-button>
		<el-button type="primary" @click="saveSubmit" size="mini">确 定</el-button>
	</div>
</el-dialog>

js

this.tableData=[{
	01ac49d3639e462c9d3836caa18ed63f: 0,
	nickName: "王五",
	readOnlyType: '11',
	userId: "04e029eb2c634daf9ddcd62fdf3aba86"
},{
	01ac49d3639e462c9d3836caa18ed63f: 1,
	nickName: "李四",
	readOnlyType: '22',
	userId: "04e029eb2c6342384628642863486284"
}]
this.cols=[{
	fieldLabel: "姓名",
	fieldName: "nickName"
	},{
	fieldLabel: "类型",
	fieldName: "nickName"
	},{
	fieldLabel: "表头3",
	fieldName: "01ac49d3639e462c9d3836caa18ed63f"
}]
handleEdit(row) {
	this.formObj = {
		workDate:'2022-10-26',
		days:[
		    {
		        "leaveType": "1bd76d7035af4c129fe380e40e72ab3a",
		        "leaveTypeName": "哈哈哈",
		        "leaveBalance": 0,
		        "editFlag": false
		    },
		    {
		        "leaveType": "b824734da928479098570aee0fc3a64b",
		        "leaveTypeName": "呵呵呵",
		        "leaveBalance": 13,
		        "editFlag": true
		    }
		]
	}
	
	this.balanceOpen = true;
},

<!--动态添加、修改弹窗-->
<template>
	<el-dialog :title="getTitle" :visible.sync="showDialog" top="8vh" width="56%" :before-close="handleClose"
	 :close-on-click-modal="false">
		<div class="form-box">
			<el-form :model="form" ref='formName'>
				<el-row :gutter="20">
					<el-col :span="12" v-for="(item,i) in form.wagesdetailList.length">
						<el-form-item :label="form.wagesdetailList[i].fieldName" label-width="200px" :prop=" 'wagesdetailList.' + i + '.fieldValue'" v-if="form.wagesdetailList[i].templateField=='userName'" :rules="[form.wagesdetailList[i].type==0?{ required: true, message: form.wagesdetailList[i].fieldName+'不能为空', trigger: 'blur'}:'']">
						  <el-input v-model="form.wagesdetailList[i].fieldValue" :placeholder="'请输入'+form.wagesdetailList[i].fieldName" ></el-input>
						</el-form-item>
						<el-form-item :label="form.wagesdetailList[i].fieldName" label-width="200px" :prop=" 'wagesdetailList.' + i + '.fieldValue'" v-if="form.wagesdetailList[i].templateField=='userOffice'" :rules="[form.wagesdetailList[i].type==0?{ required: true, message: form.wagesdetailList[i].fieldName+'不能为空', trigger: 'blur'}:'']">
						  <el-input v-model="form.wagesdetailList[i].fieldValue" :placeholder="'请输入'+form.wagesdetailList[i].fieldName" ></el-input>
						</el-form-item>
						<el-form-item :label="form.wagesdetailList[i].fieldName" label-width="200px" :prop=" 'wagesdetailList.' + i + '.fieldValue'" v-if="form.wagesdetailList[i].templateField=='identityCard'" :rules="[form.wagesdetailList[i].type==0?{ required: true, message: form.wagesdetailList[i].fieldName+'不能为空', trigger: 'blur'}:'']">
						  <el-input v-model="form.wagesdetailList[i].fieldValue" :placeholder="'请输入'+form.wagesdetailList[i].fieldName" ></el-input>
						</el-form-item>
						<el-form-item :label="form.wagesdetailList[i].fieldName" label-width="200px" :prop=" 'wagesdetailList.' + i + '.fieldValue'" v-if="form.wagesdetailList[i].templateField=='wageDate'" :rules="[form.wagesdetailList[i].type==0?{ required: true, message: form.wagesdetailList[i].fieldName+'不能为空', trigger: 'blur'}:'']">
						  <el-date-picker
						    v-model="form.wagesdetailList[i].fieldValue"
						   type="date"
							placeholder="请选择日期"
							value-format="yyyy-MM-dd">
						  </el-date-picker>
						</el-form-item>
						<el-form-item :label="form.wagesdetailList[i].fieldName" label-width="200px" :prop=" 'wagesdetailList.' + i + '.fieldValue'" v-if="form.wagesdetailList[i].templateField=='wageTypes'" :rules="[form.wagesdetailList[i].type==0?{ required: true, message: form.wagesdetailList[i].fieldName+'不能为空', trigger: 'change'}:'']">
							<el-select  v-model="form.wagesdetailList[i].fieldValue" style="width: 100%;">
						   <el-option v-for="(item,index) in soundList" :key="index" :label="item.label" :value="item.label">
						   </el-option>
						 </el-select>
						</el-form-item>
						 <!-- onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" -->
						<el-form-item   v-if="form.wagesdetailList[i].templateField!='wageDate' && form.wagesdetailList[i].templateField!='identityCard' && form.wagesdetailList[i].templateField!='wageTypes' && form.wagesdetailList[i].templateField!='userName' && form.wagesdetailList[i].templateField!='userOffice'" :label="form.wagesdetailList[i].fieldName" :prop=" 'wagesdetailList.' + i + '.fieldValue'"  :key='i' label-width="200px" :rules="[form.wagesdetailList[i].type==0?{ required: true, message: form.wagesdetailList[i].fieldName+'不能为空', trigger: 'blur'}:'']">
							<!-- 1、非数字的都替换掉，除了数字和.和-号  2、前两位不能是0加数字  3、必须保证第一个为数字而不是.  4、保证只有出现一个.而没有多个.  5、保证.只出现一次，而不能出现两次以上   6、如果第一位是负号，则允许添加 -->
							<el-input @input="(val)=>{keyUps(val,i)}" maxlength="9" :data-index="i" :value="form.wagesdetailList[i].fieldValue" :placeholder="'请输入'+form.wagesdetailList[i].fieldName" ></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="handleClose" size="mini">取 消</el-button>
			<el-button type="primary" @click="confirm" size="mini">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	export default {
		props: {
			getTitle: {
				type: String,
			},
			showDialog: {
				type: Boolean,
				default: false
			},
			soundList:{
				type:Array
			},
			form: {
			
			},
		},
		watch: {
			showDialog:{
				handler:function(newV,oldV){
						if(newV){
							this.$refs["formName"].resetFields();
						}
				}, 
				deep:true
			}
		},
		computed: {},

		data() {
			return {
				ruleList:[],
				rules: {},
			};
		},
		//生命周期 - 挂载完成（访问DOM元素）
		created() {
			
		
			
		},
		methods: {
			handleClose() {
				this.$parent.showDialog = false;
			},
			confirm() {
				this.$refs.formName.validate((valid, object) => {
					if (valid) {
						this.$parent.showDialog = false;
						this.$emit("confirm", this.form.wagesdetailList);
					} else {
						return false;
					}
				});
			},
			keyUps(val,i){
				this.form.wagesdetailList[i].fieldValue = val.replace(/[^\d\.\-]/g,'').replace(/^0\d[0-9]*/g,'').replace(/^\./g,'').replace(/\.{2,}/g,'.').replace('.','$#$').replace(/\./g,'').replace('$#$','.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
			}

		},
	};
</script>
<style lang="less" scoped>
	/deep/.el-form-item__content {
		width: 53%;
	}

	.el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 100%;
	}

	/deep/.el-form-item {
		margin-bottom: 18px;
	}
</style>