表格进行 form 校验

一、需求

比如我们需要在一个表格里输入文本或进行下拉选择，并对这些进行校验。如下

如果我们单个单个进行校验的话，太麻烦了，这时候我们可以用 form 表单来。

二、html 代码如下

<zk-form :model="form" ref="form" :rules="rules">
    <zk-table ref="tableData" :data="form.tableData" v-zk-loading="loadingTable">
    <zk-table-column prop="pno18" label="销售物料编码" width="200" />
    <zk-table-column prop="pno18Desc" label="销售描述" width="200" />
    <zk-table-column prop="count" label="数量" width="165">
      <template scope="scope">
        <zk-form-item :prop="'tableData.'+scope.$index+'.count'" :rules="rules.count">
          <zk-input-number v-model="scope.row.count" placeholder="请填写数量" clearable :min="1" :step="1" :step-strictly="true" />
        </zk-form-item>
      </template>
    </zk-table-column>
    <zk-table-column prop="productFactoryCode" label="工厂" width="200">
      <template scope="scope">
        <zk-form-item :prop="'tableData.'+scope.$index+'.productFactoryCode'" :rules="rules.productFactoryCode">
          <zk-select v-model="scope.row.productFactoryCode" placeholder="请选择工厂" clearable>
            <zk-option
              show-radio
              v-for="item in scope.row.factoryList"
              :value="item.factoryCode"
              :label="item.factoryName"
              :key="item.factoryCode">
            </zk-option>
          </zk-select>
        </zk-form-item>
      </template>
    </zk-table-column>
    <zk-table-column prop="reservedFlag" label="是否预留" width="165">
      <template scope="scope">
        <zk-form-item :prop="'tableData.'+scope.$index+'.reservedFlag'" :rules="rules.reservedFlag">
          <zk-select v-model="scope.row.reservedFlag" clearable>
            <zk-option
              show-radio
              v-for="item in reservedFlagOptions"
              :value="item.value"
              :label="item.label"
              :key="item.value">
            </zk-option>
          </zk-select>
        </zk-form-item>
      </template>
    </zk-table-column>
    <zk-table-column prop="priorityLevel" label="优先级" width="165">
      <template scope="scope">
        <zk-form-item :prop="'tableData.'+scope.$index+'.priorityLevel'" :rules="rules.priorityLevel">
          <zk-select v-model="scope.row.priorityLevel" clearable>
            <zk-option
              show-radio
              v-for="item in priorityLevelOptions"
              :value="item.value"
              :label="item.label"
              :key="item.value">
            </zk-option>
          </zk-select>
        </zk-form-item>
      </template>
    </zk-table-column>
    <zk-table-column prop="requiredDate" label="需求日期" width="180">
      <template scope="scope">
        <zk-form-item :prop="'tableData.'+scope.$index+'.requiredDate'" :rules="rules.requiredDate">
          <zk-date-picker
            :picker-options="{
              disabledDate: normalDisabledDate,
            }"
            clearable
            v-model="scope.row.requiredDate"
            type="date" />
        </zk-form-item>
      </template>
    </zk-table-column>
    <zk-table-column prop="source" label="下单来源" width="150">
      <template scope="scope">
        <zk-form-item :prop="'tableData.'+scope.$index+'.source'" :rules="rules.source">
          <zk-select v-model="scope.row.source" clearable>
            <zk-option
              show-radio
              v-for="item in [{ label: '手动添加', value: '1' },{ label: '需求转产', value: '2' }]"
              :value="item.value"
              :label="item.label"
              :key="item.value">
            </zk-option>
          </zk-select>
        </zk-form-item>
      </template>
    </zk-table-column>
    <zk-table-column prop="orderRemark" label="备注" width="300">
      <template scope="scope">
        <zk-form-item :prop="'tableData.'+scope.$index+'.orderRemark'" :rules="rules.orderRemark">
          <zk-input type="textarea" clearable v-model="scope.row.orderRemark" placeholder="请输入备注" autosize></zk-input>
        </zk-form-item>
      </template>
    </zk-table-column>
    <zk-table-column prop="seriesName" label="车系" />
    <zk-table-column prop="modelName" label="销售版本" />
    <zk-table-column prop="elec_machinery" label="电机" />
    <zk-table-column prop="Ex_decoration" label="外饰" />
    <zk-table-column prop="Interior" label="内饰" />
    <zk-table-column prop="hub" label="轮毂" width="200" />
    <zk-table-column prop="tyre" label="轮胎" />
    <zk-table-column prop="Optional_package" label="选装包" width="260" />
    <zk-table-column
      fixed="right"
      width="120"
      label="操作">
      <template scope="scope">
        <zk-popconfirm
          title="操作"
          :content="'你确定要删除当前的项目吗？'"
          @confirm="remove(scope.$index)">
          <zk-button
            slot="reference"
            type="link">
            移除
          </zk-button>
        </zk-popconfirm>
      </template>
    </zk-table-column>
  </zk-table>
</zk-form>

三、 data 数据定义

form: { 
    tableData:[]
},
rules:{
  count:[
    { required: true, message: '数量不能为空', trigger: 'change', type: 'number' }
  ],
  productFactoryCode:[
    { required: true, message: '工厂不能为空', trigger: 'change' }
  ],
  reservedFlag:[
    { required: true, message: '是否预留不能为空', trigger: 'change' }
  ],
  priorityLevel:[
    { required: true, message: '优先级不能为空', trigger: 'change' }
  ],
  requiredDate:[
    { required: true, message: '需求日期不能为空', trigger: 'change' }
  ],
  source:[
    { required: true, message: '下单来源不能为空', trigger: 'change' }
  ],
}

四、表单验证操作

save(){
    this.$refs.form.validate((valid) => {
        if (valid ) return this.submitSave();
        this.$message.error('信息未填写完成');
    });
}