【vue2form表单中的动态表单校验】

动态表单校验

• 一、业务构建
• [二、 校验规则](#二、 校验规则)

一、业务构建

      <el-form
        ref="viewForm"
        :inline="true"
        :model="view.form"
        :rules="rulesView"
        size="small"
        label-width="100"
      >
        <el-form-item
          style="width: 300px"
          label="店面"
        >
        <div v-if="viewTitle === '收银'">
          <div
            v-for="(payRcd, index) in view.form.couponsPayRcdList"
            :key="index"
          >
            <el-form-item
              label="收款方式"
              :prop="`couponsPayRcdList.${index}.prcdTermType`"
              :rules="rulesView.prcdTermType"
            >
              <el-select
                v-model.number="payRcd.prcdTermType"
                clearable
                placeholder="收款方式"
                size="small"
                style="width: 300px"
              >
                <el-option
                  v-for="item1 in pubDict.common_pay_type"
                  :key="item1.key"
                  :label="item1.name"
                  :value="1 * item1.code"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="收款账户"
              :prop="`couponsPayRcdList.${index}.acctFnmAll`"
              :rules="rulesView.acctFnmAll"
            >
              <el-select
                v-model.trim="payRcd.acctFnmAll"
                clearable
                placeholder="收款账户"
                size="small"
                style="width: 300px"
                @change="changeAcct(payRcd.acctFnmAll,payRcd)"
              >
                <el-option
                  v-for="item in acctFnmAlllist"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="实收金额"
              :prop="`couponsPayRcdList.${index}.xsPrice`"
              :rules="rulesView.xsPrice"
            >
              <el-input
                v-model.number.trim="payRcd.xsPrice"
                v-two-correct-input
                type="number"
                style="width: 300px"
              />
              <el-button
                v-show="index === 0"
                icon="el-icon-plus"
                type="primary"
                @click.stop="addSy"
              />
              <el-button
                v-show="index !== 0"
                icon="el-icon-delete"
                type="primary"
                @click.stop="delSy(view.form.couponsPayRcdList, index)"
              />
            </el-form-item>
          </div>
        </div>
     el-form/> 

二、 校验规则

• 动态设置prop
• 单个设置规则

---

-关建点

 :prop="`couponsPayRcdList.${index}.prcdTermType`"
 :rules="rulesView.prcdTermType"