若依主子表el-table 校验

最新推荐文章于 2026-04-24 03:46:36 发布

原创

最新推荐文章于 2026-04-24 03:46:36 发布 · 2.7k 阅读

标签

#elementui #vue.js #javascript

收录于

本文详细记录了在Vue.js中遇到的表格数据绑定问题，从如何将数据结构改为`form.list`形式，到el-table的使用，以及表单元素的嵌套和规则设置。特别指出，`el-form-item`的`prop`属性必须正确绑定，且表单校验规则需嵌套在`rules`对象内。此外，还提到了标签宽度和样式调整以保持界面整齐。这是一个关于前端开发中Vue组件使用和表单验证的实战经验分享。

若依的主子表

效果如上

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);
      },

总体数据格式必须为