一 html
【注意::prop 必须要和form绑定的数据路径一直】
<el-form
ref="dataForm"
:rules="rules"
:model="temp"
label-position="right"
label-width="110px"
>
<el-row>
<el-col :span="8">
<el-form-item label="用户名" prop="username">
<el-input v-model="temp.username" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="联系人姓名" prop="contactName">
<el-input v-model="temp.contactName" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="联系人电话" prop="contactMobile">
<el-input v-model="temp.contactMobile" />
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="start">
<el-table :data="temp.households" border fit style="width: 100%">
<el-table-column label="户号" prop="householdNum" min-width="100">
<template slot-scope="scope">
<el-form-item
class="table-form-item"
:prop="'households[' + scope.$index + '].householdNum'"
:rules="rules.householdNum"
>
<el-input
@input="validInputNum(scope.row.householdNum, scope.$index)"
v-model="scope.row.householdNum"
maxlength="13"
/>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-row>
</el-form>
二、js
{
temp: {
contactMobile: "",
contactName: "",
households: [
{
householdNum: "",
},
],
username: "",
},
rules: {
username: [
{
required: true, message: "用户名不能为空", trigger: "change" },
],
contactName: [
{
required: true, message: "联系人姓名不能为空", trigger: "change" },
],
contactMobile: [
{
required: true, message: "联系人电话不能为空", trigger: "change" },
],
householdNum: [
{
required: true, message: "户号不能为空!", trigger: "change" },
{
required: true,
message: "户号长度只能为13",
validator: (rule, value, callback) => {
if (value.length === 13) {
callback();
} else {
callback(new Error("请输入数字"));
}
},
trigger: "change",
},
],
},
};
三 css
.table-form-item > .el-form-item__content {
margin-left: 0 !important;//注释掉不符合规则时的红色提示文字的高度
}