el-table 嵌套 el-form表单 并且进行正则校验
-
上图
-
上代码
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" class="demo-ruleForm">
<!-- 这里用的封装的表格 表格组件 放在最下面-->
<table-operation
class="mp-custom-table"
:tableData="ruleForm.tableData"
:theadData="option"
ref="tableRef"
>
<template slot="ipAddress" slot-scope="scope">
<!-- 此处prop必须设置一个动态的值-->
<el-form-item :prop="propIpAddress(tableData, scope)" :rules="rules.ipAddress" style="margin-bottom: 0px; width: 98%" class="form-text">
<span class="required-label">*</span>
<el-input style="width: 90%" v-model="scope.row.ipAddress" placeholder="请输入IP地址"></el-input>
</el-form-item>
</template>
<template slot="macAddress" slot-scope="scope">
<!-- 此处prop必须设置一个动态的值-->
<el-form-item style="margin-bottom: 0px; width: 80%" :prop="propMacAddress(tableData, scope)" class="form-text" :rules="rules.macAddress">
<el-input v-model="scope.row.macAddress" placeholder="请输入Mac地址"></el-input>
</el-form-item>
</template>
</table-operation>
</el-form>
</template>
<script>
import TableOperation from '@/custom/tableList'; // 表格公用组件
import { goLiveHeader } from '../assetAccountConfig.js';
export default {
components: {
TableOperation, // 表格公用组件
},
data() {
var validateIP = (rule, value, callback) => {
if (value) {
const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
if (!reg.test(value) && value != '') {
callback(new Error('请输入正确的IP地址'));
} else {
callback();
}
}
};
var validateMac = (rule, value, callback) => {
if (value) {
let reg1 = /^[A-Fa-f0-9]{1,2}-[A-Fa-f0-9]{1,2}-[A-Fa-f0-9]{1,2}-[A-Fa-f0-9]{1,2}-[A-Fa-f0-9]{1,2}-[A-Fa-f0-9]{1,2}$/;
let reg2 = /^[A-Fa-f0-9]{1,2}:[A-Fa-f0-9]{1,2}:[A-Fa-f0-9]{1,2}:[A-Fa-f0-9]{1,2}:[A-Fa-f0-9]{1,2}:[A-Fa-f0-9]{1,2}$/;
if (reg1.test(value)) {
callback();
} else if (reg2.test(value)) {
callback();
} else {
callback(new Error('请输入正确的Mac地址'));
}
} else {
callback();
}
};
return {
ruleForm: {
tableData: [], //表格数据
},
rules: {
ipAddress: [
{ required: true, message: '请输入IP地址', trigger: 'blur' },
{ validator: validateIP, trigger: 'blur' },
],
macAddress: [{ validator: validateMac, trigger: 'blur' }],
}
};
},
methods: {
propIpAddress(data, index) {
// 此处我用的封装表格 所以 取值为 index.scope.$index
// 请根据自己的实际数据 取值
return 'tableData.' + index.scope.$index + '.ipAddress';
},
propMacAddress(data, index) {
return 'tableData.' + index.scope.$index + '.macAddress';
},
},
};
</script>
- 完成 欧克!