vue3 el-form中嵌套el-tabale 对输入动态校验

csstmg2024-03-14 14:47
简单案例

js 复制代码
<el-form :model="Form" :rules="rules" ref="FormRef" class="formDiv">
  <el-table :data="Form.copyWriters" style="width: 100%">
        <el-table-column label="文案链接">
          <template #default="{ row, $index }">
            <el-form-item class="centered-input" :prop="'copyWriters.' + $index + '.url'" :rules="rules.url">
              <el-input v-model.trim="row.url" placeholder="请输入文案链接"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
   </el-table>
</el-form>


const Form = ref({
  copyWriters: [
    { name: 'John', url: '', isShow: true },
    { name: 'Smith', url: '', isShow: false },
  ],
})

const rules = ref({
  url: [
    {
      required: true,
      message: '不能为空',
      trigger: 'blur',
    },
    {
      validator: validatePass,
      trigger: ['blur', 'change'],
    },
  ],
})

const validatePass = (rule, value, callback) => {
  const regExp = /^(http|https):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?$/
  if (regExp.test(value)) {
    callback() // 校验通过
  } else {
    callback(new Error('请输入正确的链接格式')) // 校验不通过，返回错误信息
  }
}