2026-06-26 20b96473f2520590a0dca6b775b81e3ea06a77a0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { InfraStudentApi } from '#/api/infra/demo';
 
import { useVbenModal } from '@vben/common-ui';
import { ElMessage, ElLoading } from 'element-plus';
import { ref, computed, nextTick,watch } from 'vue';
import { $t } from '#/locales';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 
import { getStudentTeacherByStudentId } from '#/api/infra/demo';
import { useStudentTeacherGridColumns } from '../data';
 
const props = defineProps<{
  studentId?: number // 学生编号(主表的关联字段)
}>()
 
const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions: {
  columns: useStudentTeacherGridColumns(),
  pagerConfig: {
    nabled: false,
  },
  toolbarConfig: {
    enabled: false,
  },
  height: '600px',
  rowConfig: {
    keyField: 'id',
    isHover: true,
  },
  } as VxeTableGridOptions<InfraStudentApi.StudentTeacher>,
});
 
/** 监听主表的关联字段的变化,加载对应的子表数据 */
watch(
  () => props.studentId,
  async (val) => {
    if (!val) {
      return;
    }
    await nextTick();
    await handleRefresh()
  },
  { immediate: true },
);
</script>
 
<template>
      <Grid table-title="学生班主任列表" />
</template>