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