需求

页面上部分为主组件，内容为表格jvxetable，下部分为子组件，内容也为表格。
当切换主组件表格行时，子组件表格显示主记录相关的子记录。
例如上方显示学生信息，下方显示选中学生的考试成绩信息。

实现思路

• 设置行切换点击时勾选行
  clickSelectRow
• 响应行勾选事件
  @selectRowChange="handleSelectRowChange"
• 过滤掉全选操作
  if(event.action == "selected-all")return;//勾选全部时row为undefined
• 获取操作（选中或去选无所谓）行的id
  currentRowId = event.row.id;//当前选中行ID
• 调用子组件方法（loadData），传递参数给子组件
  refAnalyte.value.loadData(currentRowId);

父组件调用子组件方法

• template引入子组件，并设置ref
  
• script定义组件的引用变量
  const refAnalyte = ref(null);
• 子组件暴露方法
  defineExpose({
  loadData
  });
• 父组件在目标处（例如行切换事件响应处）使用子组件调用其方法，并传递参数
  refAnalyte.value.loadData(currentRowId);

应用效果

代码

// 当选择的行变化时触发的事件
function handleSelectRowChange(event) {
  // console.log("row select change"); 
  if(event.action == "selected-all")return;//勾选全部时row为undefined
  // console.log(event.row.id) 
  currentRowId = event.row.id;//当前选中行ID
  refAnalyte.value.loadData(currentRowId);
  refTestMethod.value.loadData(currentRowId);
}