要点:
1.:model="table" 给表单绑定数据,data 是传入表单的数据对象
2.注意表单数据对象 data 的定义:属性 params (可按需求命名)为表单内嵌套的表格的显示数据,数组类型; 属性 rules ,为表单绑定的验证规则。
3.el-table: 采用自定义列模板,可自定义表头, el-form: 表单项绑定对应的字段名和校验规则
- 绑定传入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: []
},