简单案例

<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('请输入正确的链接格式')) // 校验不通过，返回错误信息}
}