第9节 采购合同产品切换交互
    （4）根据字表的其中一个字段，实时自动更新子表指定字段的信息
    ① 首先进入自定义数据源中，新增请求（命名为查询产品详情），修改路径名称（/get-product），编写代码，编写完成后点击保存，复制完全代码路径。
    image.png
    image.png
    var sql = //定义了一个sql变量<br />select a.id,a.product_name productName,a.spec_code specCode,b.type_name typeName,c.unit_code unitCode,a.count storeCount<br />from mes.wms_product a,mes.wms_product_class b,mes.wms_unit_code c<br />where a.product_class_id = b.id and a.unit_code_id = c.id<br />and a.id = #{id} //将wms_product这个表的id传到id中，这样就能得到一条数据<br />
    return db.findOne(sql);//findOne的意思是查询一条数据
    ② 回到子表，为产品编码组件添加事件名称
    image.png
    ③ 进入事件，编写代码
    trigger是指触发的来源；
    mount是它的值，当值发生变化时它会自动触发，不是人点的时候触发
    （是初始化，上一个接口已经提供了这个值，因此我们不需要处理）
    click是当点击它的时候触发
    value是指当前的值
    row是指当前值对应的库实体，因为是外键
    originValue原始值
    image.png
    if(data){
    scopeRow.productName=data.productName; //产品名称
    scopeRow.typeName=data.typeName; //产品分类
    scopeRow.specCode=data.specCode; //规格
    scopeRow.unitCode=data.unitCode; //单位
    }
    ④ 编写完成后，点击新增行按钮，为其修改点击触发事件（如果不修改刚新增的记录，第一次字段的切换，查询字段不会实时更新，只有多次点击后才能实现实时更新功能），接下来来解决这个问题。
    image.png
    scope.vue：是指这个子表的表格；
    data是指子表中的数据，在这我们能够指定字段的数据
    此处的字段为空，这个表会自动为其绑定数据
    scope.vue.apiAddRow({data:{productName:’’,typeName:’’,specCode:’’,unitCode:’’}})
    ⑤ 查看结果
    image.png
    image.png