``` <template> <div class="form"> <div class='left'><ele-page> <!-- 搜索表单 --> <!-- <div>选中的用户: {{ current }}</div> --> <role-search @search="reload" /> <ele-card> <!-- 表格 --> <ele-pro-table ref="tableRef" row-key="chr_pat_ID" :columns="columns" :datasource="datasource" :show-overflow-tooltip="true" v-model:current="current" :highlight-current-row="true" :export-config="{ fileName: '角色数据', datasource: exportSource }" :print-config="{ datasource: exportSource }" cache-key="systemRoleTable"> </ele-pro-table> </ele-card> </ele-page></div> <div class="right"> </div> </div> </template> <script lang="ts" setup> import { ref, watch } from 'vue'; import { ElMessageBox } from 'element-plus/es'; import { EleMessage } from 'ele-admin-plus/es'; import type { EleProTable } from 'ele-admin-plus'; import type { DatasourceFunction, Columns } from 'ele-admin-plus/es/ele-pro-table/types'; import { PlusOutlined, DeleteOutlined } from '@/components/icons'; import RoleSearch from './components/role-search.vue'; // import RoleAuth from './components/role-auth.vue'; import { pageshenhe, pagejiuzhen, removepinggu } from '@/api/patient/patientreview'; import type { Role, RoleParam } from '@/api/patient/patientreview/organ'; defineOptions({ name: 'SystemRole' }); /** 表格实例 */ const tableRef = ref<InstanceType<typeof EleProTable> | null>(null); /** 表格列配置 */ const columns = ref<Columns>([ // { // type: 'selection', // columnKey: 'selection', // width: 50, // align: 'center', // fixed: 'left' // }, { type: 'index', columnKey: 'index', width: 50, align: 'center', fixed: 'left' }, { prop: 'name', label: '姓名', width: 120, // sortable: 'custom', }, { prop: 'age', label: '年龄', // width: 120, // sortable: 'custom', }, { prop: 'gender', label: '性别', // width: 70, // sortable: 'custom', } ]); /** 表格选中数据 */ // 表格选中数据 const current = ref(null); /** 当前编辑数据 */ // const current = ref<Role | null>(null); /** 是否显示编辑弹窗 */ const showEdit = ref(false); /** 是否显示权限分配弹窗 */ const showAuth = ref(false); // 新增：监听当前行选择变化并处理 watch(current, async (newVal, oldVal) => { if (newVal && newVal !== oldVal) { try { // reload(); // console.log('Fetched patient details:', response); // 这里可以将响应的数据赋值给某个变量或状态来进行展示等操作 } catch (error) { // console.error('Failed to fetch patient details', error); } } }); /** 表格数据源 */ const datasource : DatasourceFunction = ({ pages, where, orders }) => { return pageshenhe({ ...where, ...orders, ...pages }); }; const datasources : DatasourceFunction = ({ pages, where, orders }) => { return pagejiuzhen({ ...where, ...orders, ...pages, chr_pat_ID:current.chr_pat_ID}); }; /** 搜索 */ const reload = (where ?: RoleParam) => { // console.log('编号') // selections.value = []; tableRef.value?.reload?.({ page: 1, where }); }; /** 导出和打印全部数据的数据源 */ const exportSource : DatasourceFunction = async ({ filter }) => { // const res: any = await datasource({ // filter, // pages: { page: 1, limit: 1000 } // } as any); // return res.list; }; </script>```如何实现current变化时触发datasources