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>