关于el-form 内嵌列表el-table单选校验处理rules

一 通过整体校验设置 内嵌列表table 类别自定义项校验 表格整体校验可触发

动态校验表单字段collectList列表中必填项 fieldName  

// 1 通过索引取值prop  表单校验  
 <el-form-item
      label-width="0px"
      :prop="`collectList[${$index}].fieldName`"
      :rules="[{ required: true, message: '请输入', trigger: ['blur'] }]"
       >

<template> 
    <el-form
        class="form-s"
        :model="formData"
        :rules="rules"
        ref="refProductForm"
        :require-asterisk-position="'right'"
        label-width="135px"
      >
        <el-table
              class="table-form"
              :header-cell-style="{ background: '#f5f7fa', color: '#909399', height: '40px' }"
              :data="formData.collectList"
              style="width: 100%"
            >
              <el-table-column type="index" label="序号" width="55">
                <template #default="{ $index }">
                  {{ $index + 1 }} <span style="color: red">*</span>
                </template>
              </el-table-column>
              <el-table-column label="用户信息" width="190">
                <template #default="{ row, $index }">
                  <div style="height: 46px">
                    <el-form-item
                      label-width="0px"
                      :prop="`collectList[${$index}].fieldName`"
                      :rules="[{ required: true, message: '请输入', trigger: ['blur'] }]"
                    >
                      <ElInput
                        v-model.trim="row.fieldName"
                        placeholder="请输入"
                        clearable
                        :maxlength="10"
                        show-word-limit
                        style="width: 160px"
                      />
                    </el-form-item>
                  </div>
                </template>
              </el-table-column>
    </el-table>
 </el-form>
 <el-button @click="onSubmit(refProductForm)">提交</el-button>
</template>
<script setup lang="ts">
import { reactive, computed, ref } from 'vue'
const refProductForm = ref()
import {
  ElInput,
  ElButton,
  ElIcon,
  ElForm,
  ElFormItem,
  ElMessage,
  FormRules,
  FormInstance,
  ElSelect,
  ElTable,
} from 'element-plus'
const formData = {
    collectList: [{fieldName: '', age: '', id: 1}, {fieldName: '', age: '', id: 222} ], // 表格 数据
    name: '',

    }
const rulesProductForm = reactive<FormRules<form>>({
    collectList: [{ required: true, message: '请添加数据', trigger: ['change',                 
    'blur'] }],
   name: [
     { required: true, message: '请输入name', trigger: ['change', 'blur'] }
   ],

})
const onSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
        // message: '保存成功',
   
    } else {
        // message: '请完善角色数据信息',
      return false
    }
  })
}
</script>

二、动态单选自定义校验 

1通过遍历  formData.tableList  触发校验

el-table-column label="分页名称"
                    align="left">
       <template #default="{row, $index}">
           <el-form-item :prop="`page_config.${$index}.page_name`"
                         class="page_name"
                         :rules="rules[`page_config.${$index}.page_name`]">
               <el-input placeholder="请输入分页名称"
                         :maxlength="6"
                         v-model.trim="row.page_name"
                         class="page_name-input"
                         @change="validate"
                         show-word-limit
                         clearable />
           </el-form-item>
       </template>
   </el-table-column>

  // 触发校验 单选或者走提交触发
const rulesChange = () =>{
    this.formData.tableList.forEach((item, index) => {
        refFrom.value!.validateField(`tableList.${index}.page_name`);
        //...其他字段age time
    })
}
//  遍历单项校验 对应el-item-form校验规则
//  <el-form-item :prop="`page_config.${$index}.page_name`"
//                                class="page_name"
//                                :rules="rules[`page_config.${$index}.page_name`]">
//                                 prop 与 rules对应关系值

  const rules = computed(() => {
     const rules = {};
     this.currentValue.page_config.forEach(
         (row: any, index: number): void => {
             rules[`page_config.${index}.page_name`] = {
                 trigger: "change",
                 messageEmpty: "请输入分页名称",
                 messageRepeat: "此分页名称重复",
                 validator: this.validateFieldRepeat
             };
            //...其他字段age time
         }
     );
     return rules;
 })
        
/**
 * 通用-数组项 是否重复 必填校验
 */
validateFieldRepeat(rule: any, value: any, callback: any): void {
    const fullField = String(rule.fullField).split(".");
    const [itemPro1, $index, itemPro2] = fullField;
    const val = fullField.reduce(
        (prev: any, cur: string) => (prev ? prev[cur] : undefined),
        this.currentValue
    );
    const flag = this.currentValue[itemPro1].some(
        (item: any, i: number) =>
            item[itemPro2] === val && i != Number($index)
    );
    callback(
        !val ? rule.messageEmpty : flag ? rule.messageRepeat : undefined
    );
}


const onSubmit = (formEl: FormInstance | undefined) => {
    rulesChange()
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
        // message: '保存成功',
   
    } else {
        // message: '请完善角色数据信息',
      return false
    }
  })
}