el-form和el-table嵌套使用校验问题

369 阅读1分钟

要点:

1.:model="table" 给表单绑定数据,data 是传入表单的数据对象

2.注意表单数据对象 data 的定义:属性 params (可按需求命名)为表单内嵌套的表格的显示数据,数组类型; 属性 rules ,为表单绑定的验证规则。

3.el-table: 采用自定义列模板,可自定义表头, el-form: 表单项绑定对应的字段名和校验规则

  1. 绑定传入Form 组件的 model 中对应的字段deztails1
:prop="`data[${$index}].deztails1`"

添加字段校验的时候,格式必须写成上面的形式或者 :prop=“‘表格数组.’ + scope.$index + ‘.绑定的校验字段’”

5.:rules="rules.deztails1" 绑定表单验证规则

注意:prop的绑定的值必须和v-model值名称相同,否则无法校验

主要代码如下

<el-form size="mini" ref="tableData" :model="table">
      <el-table :data="table.data" :height="TableHeight" v-loading="loadingDetailed" border size="mini"
        show-overflow-tooltip @selection-change="SelectionChange" :row-class-name="RowCalssname">
    .....
 <el-table-column prop="deztails1" label="盘点结果" width="140" align="center">
          <template slot-scope="{row,$index}">
            <el-form-item :prop="`data[${$index}].deztails1`" :rules="rules.deztails1">
              <el-select v-model="row.deztails1" :disabled="query.status == 'detail'" class="el-select-bl"
                placeholder="请选择">
                <el-option label="相符" value="相符" />
                <el-option label="盘盈" value="盘盈" />
                <el-option label="盘亏" value="盘亏" />
              </el-select>
            </el-form-item>
//data数据
      rules: {
        deztails1: [
          {
            required: true,
            // message: '请选择状态',
            validator: this.changeInventoryResult,//自定义的校验方法
            trigger: 'change'
          }
        ]
      },
      table: {
        data: []
      },