若依主子表el-table 校验

若依的主子表

效果如上

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

特此记录,坑了好几天。

  • 5
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
若依框架提供了方便的主子数据导入导出功能。具体步骤如下: 1.在实体类中使用@Excel注解标注需要导入导出的字段,同时使用@ExcelCollection注解标注子对应的集合字段。 2.在Controller中使用EasyExcel工具类进行导入导出操作。具体代码如下: ```java // 导出主子数据 @RequestMapping("/export") public void export(HttpServletResponse response) throws IOException { // 查询数据 List<MainTable> list = mainTableService.getList(); // 导出操作 EasyExcelUtil.exportExcel(response, list, MainTable.class, "主子数据"); } // 导入主子数据 @RequestMapping("/import") public void importData(MultipartFile file) throws IOException { // 导入操作 List<MainTable> list = EasyExcelUtil.importExcel(file, MainTable.class); // 保存数据 mainTableService.saveList(list); } ``` 3.在EasyExcelUtil工具类中封装了导入导出的具体实现。具体代码如下: ```java /** * 导出Excel * * @param response HttpServletResponse * @param list 数据列 * @param clazz 实体类 * @param fileName 文件名 * @throws IOException IO异常 */ public static void exportExcel(HttpServletResponse response, List<?> list, Class<?> clazz, String fileName) throws IOException { // 设置响应头 response.setContentType("application/vnd.ms-excel"); response.setCharacterEncoding("utf-8"); response.setHeader("Content-disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8") + ".xlsx"); // 导出操作 EasyExcel.write(response.getOutputStream(), clazz).sheet("Sheet1").doWrite(list); } /** * 导入Excel * * @param file 文件 * @param clazz 实体类 * @return 数据列 * @throws IOException IO异常 */ public static List<?> importExcel(MultipartFile file, Class<?> clazz) throws IOException { // 导入操作 return EasyExcel.read(file.getInputStream(), clazz, new ExcelListener()).sheet().doReadSync(); } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值