需求
页面上部分为主组件，内容为表格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);
应用效果
代码
代码语言：javascript复制// 当选择的行变化时触发的事件
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);
}
