您现在的位置是：首页 >技术教程 >vue 主子表加校验问题网站首页技术教程

1.在table绑定的data中将数据源加上form，要将tabel包含在form表单中才行

<el-table :data="form.procurementPlanDevicesList" :row-class-name="rowProcurementPlanDevicesIndex"
                  @selection-change="handleProcurementPlanDevicesSelectionChange" ref="procurementPlanDevices">

2.在表格行中加入规则校验

 <el-table-column label="设备名称" prop="equipName" width="150">
            <template slot-scope="scope">
              <el-form-item label-width="0px" :prop="'procurementPlanDevicesList.' +  scope.$index + '.equipName'"
                            :rules="[{ required: true, message: '请输入设备名称', trigger: 'blur'},
                             {max: 30, message: '输入长度不能超过30个字符', trigger: 'blur' }]">
                <el-input v-model="scope.row.equipName" placeholder="请输入设备名称"/>
              </el-form-item>
            </template>
          </el-table-column>

数字校验

      <el-form-item label-width="0px"
                            :prop="'tbMineProductStoreDailySubList.' +  scope.$index + '.dailyProduct'"
                            :rules="{  required: true, message: '请输入销量(吨)', trigger: 'change',
                             required: true,
                             pattern: /(^[1-9]([0-9]{0,12})?(.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9].[0-9]([0-9])?$)/,
                             message: '请输入12位数字,保留2位小数',}">
                <el-input v-model="scope.row.dailyProduct" placeholder="请输入当日产量(吨)"/>
              </el-form-item>

处理添加问题

在添加方法中加入下面的方法

 this.form.procurementRequisitionsSparepartsList.push(obj);

处理删除问题

   const procurementPlanSparepartsList = this.form.procurementPlanSparepartsList;
        const checkedProcurementPlanSpareparts = this.checkedProcurementPlanSpareparts;
        this.form.procurementPlanSparepartsList = procurementPlanSparepartsList.filter(function (item) {
          return checkedProcurementPlanSpareparts.indexOf(item.index) == -1
        });

因为将全局的table加入在了form表单中，所以赋值的时候需要将form加上

表单重置问题

  reset() {
      this.form = {
        billId: null,
        billCode: null,
        billTitle: null,
        billDate: null,
        deptId: null,
        userId: null,
        billMoney: null,
        billMark: null,
        billState: null,
        userName: null,
        procurementPlanDevicesList: [],
        procurementPlanSparepartsList: [],
      };

在表单重置方法中吧table绑定的数据源放在form表单中置空

提交问题

   // this.form.procurementPlanDevicesList = this.procurementPlanDevicesList;
          // this.form.procurementPlanSparepartsList = this.procurementPlanSparepartsList;

因为将list放在form表单中，所以提交的时候不需要将全局list赋值给表单