zoukankan      html  css  js  c++  java
  • elementUI中表格中表单的验证

    表格中的表单验证,就是在将表格放在表单中,将表格绑定的数据也放在表单中。

    最重要的是要给表格中需要验证的字段动态添加prop,再给其绑定规则。

    
    <el-form :model="tableForm" ref="tableForm">
    		<el-table
    			class="bankTable" 
    			:data="tableForm.bankData" 
    			border 
    			style=" 100%;margin:20px 0;"
    			@selection-change="handleSelectionChange">
    
    			<el-table-column type="selection" width="55"></el-table-column>
    
    			<el-table-column prop="BANKA" label="开户行名称" width='250' show-overflow-tooltip></el-table-column>
    
    			<el-table-column label="银行所在省">
    				<template slot-scope="scope">
    					<el-form-item :prop="`bankData.${scope.$index}.KHHSF`"  :rules="tableRules.KHHSF">
    					<el-input v-model="scope.row.KHHSF" :disabled="scope.row.search"></el-input>
    					</el-form-item>
    				</template>
    			</el-table-column>
    
    			<el-table-column prop="KHHDS" label="银行所在市">
    				<template slot-scope="scope">
    					<el-form-item :prop="`bankData.${scope.$index}.KHHDS`"  :rules="tableRules.KHHDS">
    						<el-input v-model="scope.row.KHHDS" :disabled="scope.row.search"></el-input>
    					</el-form-item>
    				</template>
    			</el-table-column>
    
    			<el-table-column prop="BANKN" label="银行账号">
    				<template slot-scope="scope">
    					<el-form-item>
    					<el-input v-model="scope.row.BANKN" :disabled="scope.row.search"></el-input>
    					</el-form-item>
    				</template>
    			</el-table-column>
    
    			<el-table-column prop="KOINH" label="户主">
    
    			</el-table-column>
    
    		</el-table>
    		</el-form>
    
        data() {
    	return {
    		tableForm:{
    			bankData:[
                                {
                                    BANKA:'',
                                    KHHSF:'',
                                    KHHDS:'',
                                    BANKN:'',
                                    KOINH:'',
                                }
                            ],
    		},
                    tableRules:{
    			//银行所在省
    			KHHSF:[
    				{ required: true, message: '请输入银行所在省'},
    				{ max: 20, message: '长度在20个字符以内',}
    			],
    			//银行所在市
    			KHHDS:[
    				{ required: true, message: '请输入银行所在省'},
    				{ max: 20, message: '长度在20个字符以内'}
    			]
    		},
            }
        }
    
  • 相关阅读:
    【洛谷P3469】[POI2008]BLO-Blockade
    【洛谷P3225】[HNOI2012]矿场搭建
    【洛谷P4568】[JLOI2011]飞行路线
    读入优化与输出优化模板
    7.29NOIP模拟赛
    【洛谷P3627】[APIO2009]抢掠计划
    【洛谷P1582】倒水
    运lucky
    【数据结构】浅谈倍增求LCA
    【题解】洛谷P4180 [BJWC2010] 严格次小生成树(最小生成树+倍增求LCA)
  • 原文地址:https://www.cnblogs.com/yinxingen/p/10042665.html
Copyright © 2011-2022 走看看