el-table 嵌套form表单自定义校验

<el-form
  ref='tableForm'
  :model='ruleForm'
  :rules='rules'
  class='demo-ruleForm'
>
  <el-table
    :data='ruleForm.list'
    class='eltableSty'
    style='width: 100%'
  >
    <el-table-column
      label='默认值'
      prop='defaultValue'
    >
      <template slot-scope='scope'>
        <el-form-item  :prop="'list.' + scope.$index + '.defaultValue'"
                      :rules='rules.gdbs'
        >
          <el-input v-model='scope.row.defaultValue'
                    :maxlength='scope.row.orderNoLength'
                    show-word-limit
          />
        </el-form-item>
      </template>
    </el-table-column>
  </el-table>
</el-form>



//data

data() {
//不提示错误信息 有可能是因为没有调用callback
  var gdbs = (rule, value, callback) => {
    // 【固定标识】/【自定义参数】- 默认值可输入数字、大写字母、特殊符号( - | . ~ )；
    if (value) {
      const re = /^[A-Za-z0-9(-.|~)]+$/
      const result = re.test(value) // true
      if (!result) {
        return callback(new Error('请输入正确内容'))
      }
    }
    callback()
  }
  return {
    ruleForm: {
      list: [{
        'ruleName': '',
        'ruleEnName': '',
        'ruleType': 'gdbs',
        'orderNoLength': '2',
        'defaultValue': '',
        'orderSort': '1',
        'remark': ''
      }]
    },
    codePreview: '',
    form: {
      'ruleName': '',
      'ruleCode': '',
      'dataTemplateId': '',
      'ruleType': ''
    },
    rules: {
      gdbs: [
        { validator: gdbs, trigger: ['blur', 'change'] }
      ]
    }
  }
},

　　

源码：

<template>
  <div class='cardStyle'>
    <div class='filter-container d-flex'>
      <div>
        <el-form :inline='true' :model='form' class='demo-form-inline'>
          <el-form-item label='规则编码:'>
            <el-input v-model.trim='form.ruleCode' class='filter-item' clearable placeholder='请输入规则编码'
                      style='width: 200px'
            />
          </el-form-item>
          <el-form-item label='规则名称:'>
            <el-input v-model.trim='form.ruleName' class='filter-item' clearable placeholder='请输入规则名称'
                      style='width: 200px;'
            />
          </el-form-item>
          <el-form-item label='编码预览:'>
            <div class='titleSty '> {{ codePreview }}</div>
          </el-form-item>
          <div>
            <el-form-item label='规则类别:'>
              <el-select v-model='form.ruleType' placeholder='请选择' style='width: 200px'>
                <el-option
                  v-for='item in typeList'
                  :key='item.code'
                  :label='item.name'
                  :value='item.code'
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label='数据模板:'>
              <el-select v-model='form.dataTemplateId' placeholder='请选择' style='width: 200px'>
                <el-option
                  v-for='item in dateTempList'
                  :key='item.id'
                  :label='item.templateName'
                  :value='item.id'
                >
                </el-option>
              </el-select>
              <!--              <el-input v-model='form.dataTemplateId' placeholder='请选择数据模板' @focus='inputSelClick'></el-input>-->
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class='ml-a'>
        <el-button
          class='filter-item'
          style=''
          type='primary'
          @click='clickAdd()'
        >
          新增定义
        </el-button>
      </div>
    </div>
    <el-form
      ref='tableForm'
      :model='ruleForm'
      :rules='rules'
      class='demo-ruleForm'
    >
      <el-table
        :data='ruleForm.list'
        class='eltableSty'
        style='width: 100%'
      >
        <el-table-column
          align='center'
          label='排序'
          prop='orderSort'
          width='100px'
        >
        </el-table-column>
        <el-table-column
          label='分类'
          prop='ruleType'
        >
          <template slot-scope='scope'>
            <el-select v-model='scope.row.ruleType' placeholder='请选择' @change='ruleTypeSelChange(scope)'>
              <el-option
                v-for='item in ruleTypeList'
                :key='item.value'
                :label='item.name'
                :value='item.code'
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label='英文名称'
          prop='ruleEnName'
        >
          <template slot-scope='scope'>
            <el-input v-model='scope.row.ruleEnName' />
          </template>
        </el-table-column>
        <el-table-column
          label='中文名称'
          prop='ruleName'
        >
          <template slot-scope='scope'>
            <el-input v-model='scope.row.ruleName' />
          </template>
        </el-table-column>
        <el-table-column
          label='长度'
          prop='orderNoLength'
        >
          <template slot-scope='scope'>
            <el-input-number v-model='scope.row.orderNoLength' :disabled='scope.row.ruleType=="rqgs"'
                             :max='9' :min='1' controls-position='right'
                             @change='rowLengthChange(scope)'
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column
          label='默认值'
          prop='defaultValue'
        >
          <template slot-scope='scope'>
            <el-form-item v-if='scope.row.ruleType =="gdbs"' :prop="'list.' + scope.$index + '.defaultValue'"
                          :rules='rules.gdbs'
            >
              <el-input v-model='scope.row.defaultValue'
                        :maxlength='scope.row.orderNoLength'
                        show-word-limit
              />
            </el-form-item>
            <el-select v-if='scope.row.ruleType =="rqgs"' v-model='scope.row.defaultValue' placeholder='请选择'
                       @change='dateDefChange(scope)'
            >
              <el-option
                v-for='item in dateTypeList'
                :key='item.value'
                :label='item.name'
                :value='item.value'
              >
              </el-option>
            </el-select>
            <el-form-item v-if='scope.row.ruleType =="zzls"' :prop="'list.' + scope.$index + '.defaultValue'"
                          :rules='rules.zzls'
            >
              <el-input v-if='scope.row.ruleType =="zzls"' v-model='scope.row.defaultValue'
                        :maxlength='scope.row.orderNoLength'
                        show-word-limit
                        @change='zizengChange(scope)'
              />
            </el-form-item>
            <el-form-item v-if='scope.row.ruleType =="zdycs"' :prop="'list.' + scope.$index + '.defaultValue'"
                          :rules='rules.gdbs'
            >
              <el-input v-if='scope.row.ruleType =="zdycs"' v-model='scope.row.defaultValue'
                        :maxlength='scope.row.orderNoLength'
                        show-word-limit
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label='备注'
          prop='remark '
        >
          <template slot-scope='scope'>
            <el-input v-model='scope.row.remark' />
          </template>
        </el-table-column>
        <el-table-column
          label='操作'
          width='80px'
        >
          <template slot-scope='scope'>
            <el-button size='mini' type='danger' @click='del(scope)'>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div class='footerBtn'>
      <el-button type='primary' @click='saveData'>保存</el-button>
      <el-button @click='cancelClick'>取消</el-button>
    </div>
    <AddDataTempModal :dialogShow.sync='dateTempShow' />
  </div>
</template>

<script>
import AddDataTempModal from '@/views/Enterprise/AddDataTempModal'
import {
  codeRuleAddCodeRule,
  codeRuleDetailsGetCodeRuleDetails,
  codeRuleupdateCodeRule,
  dataTemplateGetDataTemplateList
} from '@/api/tapi'

export default {
  name: 'CodingRulesAdd',
  components: { AddDataTempModal },
  data() {
    var gdbs = (rule, value, callback) => {
      // 【固定标识】/【自定义参数】- 默认值可输入数字、大写字母、特殊符号( - | . ~ )；
      if (value) {
        const re = /^[A-Za-z0-9(-.|~)]+$/
        const result = re.test(value) // true
        if (!result) {
          return callback(new Error('请输入正确内容'))
        }
      }
      callback()
    }
    var zzls = (rule, value, callback) => {
      if (value) {
        const re = /^[0-9]+$/
        const result = re.test(value) // true
        if (!result) {
          return callback(new Error('请输入正确数字'))
        }
        if (result) {
          if (parseInt(value) > 100) {
            return callback(new Error('数字之和不能超过100'))
          }
        }
      }
      callback()
    }
    return {
      ruleForm: {
        list: [{
          'ruleName': '',
          'ruleEnName': '',
          'ruleType': 'gdbs',
          'orderNoLength': '2',
          'defaultValue': '',
          'orderSort': '1',
          'remark': ''
        }, {
          'ruleName': '',
          'ruleEnName': '',
          'ruleType': 'zzls',
          'orderNoLength': '4',
          'defaultValue': '0001',
          'orderSort': '2',
          'remark': ''
        }]
      },
      codePreview: '',
      form: {
        'ruleName': '',
        'ruleCode': '',
        'dataTemplateId': '',
        'ruleType': ''
      },
      rules: {
        gdbs: [
          { validator: gdbs, trigger: ['blur', 'change'] }
        ],
        zzls: [
          { validator: zzls, trigger: ['blur', 'change'] }
        ]
      },
      tableKey: 0,
      dateTempList: [],
      total: 0,
      rowId: '',
      typeList: [],
      listQuery: {
        page: 1,
        pageSize: 50
      },
      dateTempShow: false,
      ruleTypeList: [
        // { name: '固定标识', value: '1' },
        // { name: '日期格式', value: '3' },
        // { name: '自增流水', value: '4' },
        // { name: '自定义参数', value: '2' }
      ],
      dateTypeList: [
        { name: 'yyyyMMdd', value: this.$moment().format('YYYYMMDD') },
        { name: 'yyyy', value: this.$moment().format('YYYY') },
        { name: 'yyMMdd', value: this.$moment().format('YYMMDD') },
        { name: 'MMDD', value: this.$moment().format('MMDD') },
        { name: 'yyyy-MM-dd', value: this.$moment().format('YYYY-MM-DD') }],
      list: [{
        'ruleName': '',
        'ruleEnName': '',
        'ruleType': 'gdbs',
        'orderNoLength': '2',
        'defaultValue': '',
        'orderSort': '1',
        'remark': ''
      }, {
        'ruleName': '',
        'ruleEnName': '',
        'ruleType': 'zzls',
        'orderNoLength': '4',
        'defaultValue': '0001',
        'orderSort': '2',
        'remark': ''
      }]
    }
  },
  watch: {
    ruleForm: {
      handler(newName, oldName) {
        // ...
        console.log(newName, oldName)
        let str = ''
        newName.list.map(ele => {
          str = str + ele.defaultValue
        })
        this.codePreview = str
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.getDefaultDictList()
    this.getTemplateDataList()
    const rowId = this.$route.params.id
    if (rowId) {
      this.rowId = rowId
      this.getInfo(rowId)
    }
    console.log(rowId)
  },
  methods: {
    getInfo(rowId) {
      codeRuleDetailsGetCodeRuleDetails(rowId).then((res) => {
        console.log(res)
        const result = res.data
        this.form = {
          'id': result.id,
          'ruleName': result.ruleName,
          'ruleCode': result.ruleCode,
          'dataTemplateId': result.dataTemplateId,
          'ruleType': result.ruleType
        }
        this.ruleForm.list = result.getCodeRuledetailVOList
      })
    },
    getTemplateDataList() {
      dataTemplateGetDataTemplateList(this.listQuery).then(res => {
        console.log(res.page.total)
        this.dateTempList = res.data
      }).catch(e => {
        console.log(e)
      })
    },
    inputSelClick() {
      this.dateTempShow = true
    },
    async getDefaultDictList() {
      this.typeList = await this.$store.dispatch('common/getDictByCode', 'code_rule_type')
      this.ruleTypeList = await this.$store.dispatch('common/getDictByCode', 'code_rule_details_type')
    },
    clickAdd() {
      const ind = this.ruleForm.list.length + 1
      this.ruleForm.list.push(
        {
          'ruleName': '',
          'ruleEnName': '',
          'ruleType': 'gdbs',
          'orderNoLength': '1',
          'defaultValue': '',
          'orderSort': ind,
          'remark': ''
        }
      )
    },
    async validate() {
      try {
        await this.$refs.tableForm.validate()
      } catch (error) {
        this.$message({
          type: 'warning',
          message: error.message || '填写数据有误!'
        })
        throw Error()
      }
    },
    cancelClick() {
      this.$store.dispatch('tagsView/delCurrentTag', { '_this': this })
    },
    async saveData() {
      await this.validate()
      console.log(this.ruleForm.list)
      // let str = '1'
      // let newStr = str.padStart(3, 'F')
      // console.log(newStr, parseInt(newStr))
      console.log(this.form)
      const gdbs_esult = this.ruleForm.list.filter(ele => {
        return ele.ruleType == 'gdbs'
      })
      if (gdbs_esult.length > 1) {
        return this.$message.warning('只允许有一个固定标识')
      }
      const rqgs_esult = this.ruleForm.list.filter(ele => {
        return ele.ruleType == 'rqgs'
      })
      if (rqgs_esult.length > 1) {
        return this.$message.warning('只允许有一个日期格式')
      }
      const result = this.ruleForm.list.filter(ele => {
        return ele.ruleType == 'zzls'
      })
      console.log(result)
      if (result.length == 1) {
        if (this.rowId) {
          //  编辑
          // const list = this.ruleForm.list
          // for (let i = 0; i < list.length; i++) {
          //   const ele = list[i]
          //   delete ele.codeRuleMasterId
          //   delete ele.compId
          // }
          const params = {
            'id': this.rowId,
            'ruleName': this.form.ruleName,
            'ruleCode': this.form.ruleCode,
            'ruleType': this.form.ruleType,
            'dataTemplateId': this.form.dataTemplateId,
            'ruleDetailsDTOS': this.ruleForm.list
          }
          codeRuleupdateCodeRule(params).then(res => {
            console.log(res.data)
            this.$message.success('操作成功')
            this.$store.dispatch('tagsView/delCurrentTag', { '_this': this })
            this.$router.push(`/CodingRules`)
          }).catch(e => {
            console.log(e)
          })
        } else {
          const params = {
            'ruleName': this.form.ruleName,
            'ruleCode': this.form.ruleCode,
            'ruleType': this.form.ruleType,
            'dataTemplateId': this.form.dataTemplateId,
            'ruleDetailsDTOS': this.ruleForm.list
          }
          codeRuleAddCodeRule(params).then(res => {
            console.log(res.data)
            this.$message.success('操作成功')
            this.$store.dispatch('tagsView/delCurrentTag', { '_this': this })
            this.$router.push(`/CodingRules`)
          }).catch(e => {
            console.log(e)
          })
        }
      } else if (result.length == 0) {
        return this.$message.warning('请添加自增流水')
      } else {
        return this.$message.warning('只允许有一个自增流水')
      }
    },
    handleFilter() {

    },
    // 长度chagne
    rowLengthChange(scope) {
      if (scope.row.ruleType == 'zzls') {
        const lang = scope.row.orderNoLength
        const str = '1'
        const newStr = str.padStart(lang, '0')
        this.ruleForm.list[scope.$index].defaultValue = newStr
      }
    },
    zizengChange(scope) {
      console.log(scope.row)
      let lang = scope.row.defaultValue.length
      console.log(lang)
      this.ruleForm.list[scope.$index].orderNoLength = lang
    },
    ruleTypeSelChange(scope) {
      console.log(scope)
      this.ruleForm.list[scope.$index].defaultValue = ''
      const type = scope.row.ruleType
      if (type == 'rqgs') {
        // 日期
        this.ruleForm.list[scope.$index].defaultValue = this.$moment().format('YYYYMMDD')
        this.ruleForm.list[scope.$index].orderNoLength = 8
      }
      if (type == 'zdycs') {
        // 自定义
        this.ruleForm.list[scope.$index].defaultValue = ''
        this.ruleForm.list[scope.$index].orderNoLength = 2
      }
      if (type == 'zzls') {
        // 自增流水
        const str = '1'
        const newStr = str.padStart(3, '0')
        this.ruleForm.list[scope.$index].defaultValue = newStr
        this.ruleForm.list[scope.$index].orderNoLength = 3
      }
    },
    // 默认值 日期改变
    dateDefChange(scope) {
      console.log(scope)
      this.ruleForm.list[scope.$index].orderNoLength = scope.row.defaultValue.length
    },
    getList() {
      console.log('')
    },
    //  删除
    del(scope) {
      console.log(scope)
      if (scope.row.ruleType == 'zzls') {
        return this.$message.warning('自增流水不允许删除')
      }
      const that = this
      that
        .$confirm(`是否确认删除？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        })
        .then(async() => {
          this.ruleForm.list.splice(scope.$index, 1)
          this.$message.success('删除成功')
        })
    }
  }
}
</script>

<style lang='less' scoped>
.titleSty {
  font-size: 16px;
  line-height: 40px;
}

/deep/ .el-select {
  width: 100%;
}

.eltableSty {
  /deep/ .el-input__inner {
    height: 40px;
  }
}

.wid300 {
  width: 300px;
}

.footerBtn {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

/deep/ .el-form-item__content {
  height: 24px;
}

/deep/ .el-form-item__error {
  padding-top: 4px;
}
</style>