vue element-ui的el-table和el-form嵌套使用表单校验

 

表格是el-table自动获取的后台数据，每行都有el-input的验证，这样一个rules的规则就不能匹配到每一行，所以要是用动态的prop和rules规则

关键一

此处 data中定义的变量，params：表格数据，后台查询获得；paramsRules：校验规则

关键二

此处 :model、:rules

关键三

此处 :prop="'params.' + scope.$index + '.min'"和:rules="paramsForm.paramsRules.min"即动态对应上每行数据的校验规则

<template>
  <div>
    <el-form :model="paramsForm" ref="rForm" :rules="paramsForm.paramsRules">
      <el-table
        :data="paramsForm.params"
        style="width: 100%"
        border
        stripe
        max-height="990"
        highlight-current-row
      >
        <el-table-column
          fixed
          width="55"
          align="center"
            label="序号"
          show-overflow-tooltip
          type="index"
          :index="indexMethod"
        >
        </el-table-column>
        <el-table-column align="center" type="selection" width="55">
        </el-table-column>

        <el-table-column
          label="检测类型"
          align="center"
          width="160"
          prop="kpiName"
          sortable
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.kpiName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="检测开关" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.kpiStatus"
              :disabled="isDisabled"
              active-text="关闭"
              inactive-text="开启"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="报警阈值" align="center">
          <template slot-scope="scope">
            <el-row>
              <el-col :span="10" style="height: 23px">
                <el-form-item
                  v-if="scope.row.kpiType === 'range'"
                  :prop="'params.' + scope.$index + '.min'"
                  :rules="paramsForm.paramsRules.min"
                >
                  <el-input
                    v-model.number="scope.row.min"
                    size="small"
                    :disabled="isDisabled"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="1">-</el-col>
              <el-col :span="10">
                <el-form-item
                  v-if="scope.row.kpiType === 'range'"
                  :prop="'params.' + scope.$index + '.max'"
                  :rules="paramsForm.paramsRules.max"
                >
                  <el-input
                    v-model.number="scope.row.max"
                    size="small"
                    :disabled="isDisabled"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-form-item size="large" align="center" style="padding-top: 30px">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDisabled: false,
      paramsForm: {
        params: [
          {
            kpiName: "视频丢失",
            id: "",
            kpiStatus: false,
            kpiType: "other",
            min: "",
            max: "",
          },
          {
            kpiName: "画面抖动",
            id: "",
            kpiStatus: false,
            kpiType: "other",
            min: "",
            max: "",
          },
          {
            kpiName: "画面冻结",
            id: "",
            kpiStatus: false,
            kpiType: "other",
            min: "",
            max: "",
          },
          {
            kpiName: "镜头遮挡",
            id: "",
            kpiStatus: false,
            kpiType: "other",
            min: "",
            max: "",
          },
          {
            kpiName: "图像过亮",
            id: "",
            kpiStatus: false,
            kpiType: "range",
            min: 60,
            max: 120,
          },
          {
            kpiName: "图像过暗",
            id: "",
            kpiStatus: false,
            kpiType: "range",
            min: 10,
            max: 60,
          },
        ],
        paramsRules: {
          min: [
            {
              type: "number",
              required: false,
              min: 1,
              max: 120,
              message: "数值范围（1-120）",
              trigger: "blur",
            },
          ],
          max: [
            {
              type: "number",
              required: false,
              min: 1,
              max: 120,
              message: "数值范围（1-120）",
              trigger: "blur",
            },
          ],
        },
      },
    };
  },
  methods: {
    indexMethod(index) {
      return index + 1;
    },
    submitForm() {
      this.$refs["rForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
        console.log("success");
      });
    },
    resetForm() {
      this.$refs["rForm"].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>