技術標籤：筆記vue

1. 如果table在form中，且需要對每個表格進行驗證的話，需要對prop進行處理
2. el-form 上，model繫結的資料是json物件格式
3. el-form-item 上，prop繫結的值必須可以通過 . 的方式從el-form上的model繫結的物件中找到(即prop值和el-form-item中model的名字一致)

例如設定某動態表單

<!--表單項部分-->
<el-form-item :prop="'list.'+ index + '.tobaccoTypeId'" :rules="rules.tobaccoTypeId"
 
>
            <el-select
              v-model="detail.tobaccoTypeId"
              placeholder="請選擇"
              filterable
              style="width:240px"
              @change="getTobaccoRemainWeight"
            >
              <el-option
                v-for
 
="item in brandList"
                :key="item.TOBACCO_TYPE_ID"
                :label="item.TOBACCO_TYPE_NAME+'(剩餘量:'+item.NOT_USED_WEIGHT+'kg)'"
                :value="item.TOBACCO_TYPE_ID"
              ></el-option>
            </el-select>
</
 
el-form-item>

:prop="'list.'+ index + '.tobaccoTypeId'"相當於獲取list[index].tobaccoTypeId

動態表單驗證完整程式碼如下：

<el-form
      ref="dataForm"
      :model="blendingOrder"
      size="mini"
      label-position="right"
      label-width="90px"
      style="margin-left:50px;"
    >
      <el-form-item label="殘損菸絲：" prop="fragmentList">
        <el-row>
          <el-col :span="12">
            <p>牌號</p>
          </el-col>
          <el-col :span="6">
            <p>重量(kg)</p>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addFragmentDetail">新增</el-button>
          </el-col>
        </el-row>
        <div v-for="(detail,index) in blendingOrder.list" :key="index">
          <el-row :key="index">
            <el-col :span="12">
              <el-form-item :prop="'list.'+ index + '.tobaccoTypeId'" :rules="rules.tobaccoTypeId">
                <el-select
                  v-model="detail.tobaccoTypeId"
                  placeholder="請選擇"
                  filterable
                  style="width:240px"
                  @change="getTobaccoRemainWeight"
                >
                  <el-option
                    v-for="item in brandList"
                    :key="item.TOBACCO_TYPE_ID"
                    :label="item.TOBACCO_TYPE_NAME+'(剩餘量:'+item.NOT_USED_WEIGHT+'kg)'"
                    :value="item.TOBACCO_TYPE_ID"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :prop="'list.'+ index + '.weight'" :rules="rules.weight">
                <el-input v-model="detail.weight" placeholder="請輸入摻配重量" style="width:80%" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button
                  v-show="showDelete"
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="delFragmentDetailList"
                >刪除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- </el-form-item> -->
        </div>
      </el-form-item>

data(){
    return{
        blendingOrder: {
            list: [
              {
                tobaccoTypeId: "",
                quantity: 0
              }
            ]
        },
        rules: {
        tobaccoTypeId: [
          { required: true, message: "請選擇捲菸牌號", trigger: "change" }
        ],
        // 包含小數的數字驗證
        weight: [
          {
            validator: (rule, value, callback) => {
              //包含小數的數字
              let reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
              if (!value) {
                return callback(new Error("摻配重量不能為空"));
              }
              setTimeout(() => {
                if (!reg.test(value)) {
                  callback(new Error("請輸入數字值"));
                } else {
                  if (value > this.tobaccoRemainWeight) {
                    callback(new Error("必須小於當前菸絲剩餘重量"));
                  } else if (value < 0) {
                    callback(new Error("不能為負數"));
                  } else {
                    callback();
                  }
                }
              }, 1000);
            },
            trigger: ["blur", "submit"]
          }
        ]
    }
}

頁面圖