表格实现单条校验或者多条校验
template
<el-form
:model="tableForm"
ref="tableForm"
:rules="rulestable"
size="small"
>
<el-table
:key="tableKey"
:data="tableForm.longAdjustList"
@select="onTableSelect"
@selection-change="handleSelectionChangeLongAdjust"
v-if="active === 1"
>
<el-table-column type="selection" width="55" />
<el-table-column label="班级" prop="schoolClassName" width="150" />
<el-table-column label="原上课周期" align="center" width="150">
<template slot-scope="scope">
{{ "第" + scope.row.weekNum + "周" }}
</template>
</el-table-column>
<el-table-column
label="原上课周数"
prop="weekDay"
align="center"
width="150"
/>
<el-table-column
label="原上课周次"
prop="sequenceName"
align="center"
width="150"
/>
<el-table-column
label="原上课科目"
prop="subjectName"
align="center"
width="150"
/>
<el-table-column
label="原任课老师"
prop="teacherName"
align="center"
width="150"
/>
<el-table-column
label="调课周期"
align="center"
width="150"
v-if="longAdjustForm.coursePlanType == 1"
>
<template slot-scope="scope">
<el-form-item
:prop="'longAdjustList.' + scope.$index + '.targetWeekNum'"
:rules="
rows.length && rows.indexOf(scope.row) !== -1
? rulestable.targetWeekNum
: []
"
>
<el-select
v-model="scope.row.targetWeekNum"
filterable
placeholder="选择调课周期"
>
<el-option
v-for="option in weekList"
:key="option.weekId"
:label="'第' + option.weekNum + '周'"
:value="option.weekNum"
/>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column
label="调课周数"
align="center"
width="150"
v-if="longAdjustForm.coursePlanType == 1"
>
<template slot-scope="scope">
<el-form-item
:prop="'longAdjustList.' + scope.$index + '.targetWeekDay'"
:rules="
rows.length && rows.indexOf(scope.row) !== -1
? rulestable.targetWeekDay
: []
"
>
<el-select
filterable
v-model="scope.row.targetWeekDay"
placeholder="请选择"
>
<el-option
v-for="dict in weekDayOptions"
:key="dict.value"
:label="dict.label"
:value="dict.label"
></el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
实现复选框勾选了才校验关键性代码
<el-form-item
:prop="'longAdjustList.' + scope.$index + '.targetWeekDay'"
:rules="
rows.length && rows.indexOf(scope.row) !== -1
? rulestable.targetWeekDay
: []
"
>
校验规则
data() {
return {
tableForm: {
//附属条件表格
longAdjustList: [],
},
rows: [],
rulestable: {
targetWeekNum: [
{
required: true,
message: "请选择周期",
// trigger: "change",
},
],
targetWeekDay: [
{
required: true,
message: "请选择调课周数",
// trigger: "change",
},
],
},
}
}
methods:{
onTableSelect(rows, row) {
this.$refs.tableForm.resetFields();
let selected = rows.length && rows.indexOf(row) !== -1;
this.$nextTick(() => {
this.$refs.tableForm.validate((valid) => {
if (valid) {
}
});
});
},
handleSelectionChangeLongAdjust(selection) {
this.rows = selection;
},
}
实现效果
