< el- form : model= "ruleForm" ref= "ruleForm" class = "demo-ruleForm" > < el- table : data= "ruleForm.tableDataShou" border style= "width: 100%;" > < el- table- column type= "index" label= "序号" width= "50" align= "center" > < / el- table- column> < el- table- column prop= "lon" label= "经度" align= "center" > < template v- slot= "scope" > < el- form- item : prop= "'tableDataShou.'+scope.$index+'.lon'" : rules= "rules.lon" > < el- input v- model= "scope.row.lon" > < / el- input> < / el- form- item> < / template> < / el- table- column> < el- table- column prop= "lat" label= "纬度" align= "center" > < template v- slot= "scope" > < el- form- item : prop= "'tableDataShou.'+scope.$index+'.lat'" : rules= "rules.lat" > < el- input v- model= "scope.row.lat" > < / el- input> < / el- form- item> < / template> < / el- table- column> < / el- table>
< / el- form>
< el- button type= "primary" @click= "finish('ruleForm')" > 输入完成< / el- button>
data ( ) { var longitude = ( rule, value, callback ) => { let isTrue = / ^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$ / ; if ( ! isTrue. test ( value) ) { callback ( new Error ( "请按照经度规则输入" ) ) ; } else if ( value. slice ( - 1 ) == "." ) { callback ( new Error ( "最后一位不能是小数点" ) ) ; } else { callback ( ) ; } } ; var latitude = ( rule, value, callback ) => { let isTrue = / ^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$ / ; if ( ! isTrue. test ( value) ) { callback ( new Error ( "请按照纬度规则输入" ) ) ; } else if ( value. slice ( - 1 ) == "." ) { callback ( new Error ( "最后一位不能是小数点" ) ) ; } else { callback ( ) ; } } ; return { ruleForm : { tableDataShou : [ { lon : "" , lat : "" } ] , } , rules : { lon : [ { require : true , validator : longitude, trigger : "change" } ] , lat : [ { require : true , validator : latitude, trigger : "change" } ] , } , } ; } ,
finish ( formName ) { this . $refs[ formName] . validate ( ( valid ) => { if ( valid) { console. log ( "验证通过" ) ; } else { console. log ( "error submit!!" ) ; return false ; } } ) ;
}