jeecgboot-vue3笔记（二）主子组件数据加载

需求

页面上部分为主组件，内容为表格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 | HTMLElement>(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);
}