el-table实现复选框选中时才校验数据

660 阅读1分钟

表格实现单条校验或者多条校验

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:{
    //当用户手动勾选数据行的 Checkbox 时触发的事件
    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;
    },

}
    

实现效果

image.png