若依的主子表
效果如上
1.修改,eltable的绑定数据,由原来的List,改成form.list。将原来绑定的list,放到form{}里。代码中原有的this.list 改成 this.form.list。这一点非常重要,坑了好几天。
<el-table :data="form.brebroodsList" :row-class-name="rowBrebroodsIndex" show-summary
@selection-change="handleBrebroodsSelectionChange" ref="brebroods" highlight-current-row >
/** 引种明细表添加按钮操作 */
handleAddBrebroods() {
let obj = {};
obj.brebatchnum = this.form.brebatchnum;
obj.houseid = "";
obj.malenum = "";
obj.femalnum = "";
obj.remark = "";
this.form.brebroodsList.push(obj);
},
总体数据格式必须为
form:{
name:,
desc:,
list:[]
}
2.在原来的input外面套上 <el-form-item...
<el-form-item :prop="'brebroodsList.' + scope.$index +'.malenum'" :rules="rules.brebroodsList.malenum" label-width="0" style="margin-bottom: 0;">
<el-input-number :controls="false" placeholder="请输入公鸡数" v-model="scope.row.malenum" />
</el-form-item>
此处需注意: :prop="'List名称.' + scope.$index +'.字段名'" Table绑定的:data 必须是form里的,否则报错: "Error: please transfer a valid prop path to form item!"
:rules,可以自己指定rules。为了统一,也嵌套到原来的rules内
// 表单校验
rules: {
deptid: [{
required: true,
message: '请选择部门',
trigger: 'change'
}],
brooddate: [{
required: true,
message: '请选择引种日期',
trigger: 'change'
}],
breed: [{
required: true,
message: '请选择品种',
trigger: 'change'
}],
froms: [{
required: true,
message: '请输入接鸡来源(种禽公司名称)',
trigger: 'blur'
}],
malenum: [{
required: true,
message: '引种公鸡数',
trigger: 'blur'
}],
femalenum: [{
required: true,
validator: CheckFeamlNum,
trigger: 'blur'
}],
smalenum: [{
required: true,
message: '引种公鸡数',
trigger: 'blur'
}],
brebroodsList: {
malenum: [{
required: true,
message: '引种公鸡数',
trigger: 'blur'
}],
houseid: [{
required: true,
message: '鸡舍号',
trigger: 'blur'
}],
},
},
label-width="0" style="margin-bottom: 0;"
必须要设标签宽度为0,否则前面多一点空白
必须要设style,否则加了form-item标签的跟不加的不对齐。
特此记录,坑了好几天。