el-table nests el-form and adds regular check

el-table nests el-form forms and performs regular verification

1. above picture
   
   

2. upper code

<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>

4. Complete Oak!