el-table嵌套 el-form并且加正则校验

最新推荐文章于 2024-03-13 11:08:16 发布

你的眼睛會笑

最新推荐文章于 2024-03-13 11:08:16 发布

阅读量653

点赞数 4

分类专栏： vue2 文章标签： vue javascript vue.js

本文链接：https://blog.csdn.net/weixin_45563734/article/details/131211621

版权

vue2 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

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>