< 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 ;
}
} ) ;
}