若依的主子表

效果如上

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标签的跟不加的不对齐。

特此记录,坑了好几天。

Logo

快速构建 Web 应用程序

更多推荐