<el-form :model="form" ref="tableForm" :rules="rules" size="small">
<el-table v-loading="loading" :data="form.usageList"
:header-cell-style="{
background: '#F5F8FE',
fontSize: '16px',
fontWeight: 600,
color: '#333333',
height: '40px',
'text-align': 'center',
}"
>
<el-table-column label="月份" :index="indexMethod" type="index" prop="sort" ></el-table-column>
<el-table-column label="取水量(万m³)" prop="intakeUse">
<template slot-scope="scope">
<el-form-item
:prop="'usageList.' + scope.$index + '.intakeUse'"
:rules="rules.intakeUse"
>
<el-input
v-model="scope.row.intakeUse"
@input="scope.row.intakeUse = scope.row.intakeUse.replace(/[^\d.]/g,'')"
></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column
label="计划量(万m³)"
prop="planIntakeUse"
>
<template slot-scope="scope">
<el-form-item
:prop="'usageList.' + scope.$index + '.planIntakeUse'"
:rules="rules.planIntakeUse"
>
<el-input
v-model="scope.row.planIntakeUse"
@input="scope.row.planIntakeUse = scope.row.planIntakeUse.replace(/[^\d.]/g, '')"
:disabled="disabled"
placeholder="请补充"
></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
table中的数据在 form.usageList中,
故 :prop="'usageList.' + scope.$index + '.planIntakeUse'"
在Vue中,prop属性用于指定组件从父组件接收的属性值。在表格组件如el-table-column中,prop通常用于指定要显示或操作的数据字段。在给出的代码片段中,prop的写法有一些特殊的考虑:
对于第二列,prop=“intakeUse”:这表示该列要显示的数据是表格数据对象(form.usageList中的每一项)的intakeUse属性。这样,当表格渲染时,它会自动获取每行数据的intakeUse字段并显示出来。
在中,:prop="'usageList.' + scope.$index + '.intakeUse'":这个写法是为了与表格内的动态数据绑定。scope.$index是当前行的索引,结合usageList(表格数据数组的名字),可以形成一个完整的路径,如usageList.0.intakeUse,usageList.1.intakeUse等,这使得el-form-item能够与表格中特定行的intakeUse属性进行数据绑定和验证。
验证规则
至于验证规则,按照正常的写法即可
rules: {
intakeUse: [
{
required: true,
message: "请输入取水量",
trigger: "blur",
},
],
planIntakeUse: [
{
required: true,
message: "请输入计划量",
trigger: "blur",
},
],
表头添加校验标志
<el-table-column
label="计划量(万m³)"
prop="planIntakeUse"
:render-header="addTag"
></el-table-column>
addTag(h, { column }) {
return [
h("span", { style: "color:#F56C6C" }, "*"),
h("span", " " + column.label),
];
},
demo2:
<el-form ref="formRef" :model="tableList" :rules="rules">
<el-table :data="tableList" style="width: 100%">
<el-table-column label="开始时间" width="180" prop="startDate">
<template #default="scope">
<span v-if="!isShow">{{ scope.row.startDate }}</span>
<el-form-item v-show="isShow" :prop="scope.$index + '.startDate'"
:rules="rulesTarget.startDate">
<el-date-picker clearable
style="width: 150px;"
v-model="scope.row.startDate"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择开始时间">
</el-date-picker>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="结束时间" width="180" align="center" prop="endDate">
<template #default="scope">
<span v-if="!isShow">{{ scope.row.endDate }}</span>
<el-form-item v-show="isShow" :prop="scope.$index + '.endDate'"
:rules="rulesTarget.endDate">
<el-date-picker clearable
style="width: 150px;"
v-model="scope.row.endDate"
type="date"
value-format="YYYY-MM-DD"
:disabled-date="(time)=>{return disabledEndDate(time, scope.row.startDate)}"
placeholder="请选择结束时间">
</el-date-picker>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="备注" prop="remark" align="center">
<template #default="scope">
<span v-if="!isShow">{{ scope.row.remark }}</span>
<el-form-item v-show="isShow" :prop="scope.$index + '.remark'" :rules="rulesTarget.remark">
<el-input v-model="scope.row.remark" placeholder="请输入备注"/>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
验证规则如下:
const data = reactive({
rules: {
startDate: [
{required: true, message: "开始时间不能为空", trigger: "blur"}
],
endDate: [
{required: true, message: "结束时间不能为空", trigger: "blur"}
],
remark: [
{required: true, message: "备注不能为空", trigger: "blur"}
]
}
});
提交方法:
/** 提交按钮 */
function submitSave() {
proxy.$refs["formRef"].validate(valid => {
if (valid) {
save(tableList.value).then(response => {
proxy.$modal.msgSuccess("保存成功");
isOpen.value = false;
getList();
});
}
});
}