<!--用el-form包着el-table-->
<el-form :model="state" ref="recordsRef" :rules="state.formRules">
<!--表格绑定的数据需要是el-form里面的字段-->
<el-table :data="state.tableData" border>
<el-table-column align="center" label="电话" width="120">
<template #default="scope">
<!-- :props="'绑定的表格字段.'+scope.$index+'.用户输入绑定的字段'"-->
<!--:rules="校验对象.校验字段"-->
<el-form-item :prop="'tableData.' + scope.$index + '.telePhone'" :rules="state.formRules.telePhone">
<el-input v-model="scope.row.telePhone" size="small" clearable />
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
const isValidPhone(phone)=> {
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
return reg.test(phone);
}
const validPhone = (rule, value, callback) => {
if (!value) {
callback();
} else if (isValidPhone(value)) {
callback();
} else {
callback(new Error("请输入正确的11位手机号码"));
}
};
const state = reactive({
formRules: {
telePhone: [{ required: false, validator: validPhone, trigger: "change" }],
},
tableData: [],
});
参考:el-table添加表单校验 - 简书 (jianshu.com)