diff --git a/apps/web-antd/src/views/dataManger/deviceData/index.vue b/apps/web-antd/src/views/dataManger/deviceData/index.vue index 0f8962f..8db139c 100644 --- a/apps/web-antd/src/views/dataManger/deviceData/index.vue +++ b/apps/web-antd/src/views/dataManger/deviceData/index.vue @@ -76,6 +76,11 @@ const fixedColumns = [ // 合并固定列和动态列 - 使用计算属性确保响应式 const allColumns = computed(() => { + // 如果表格未初始化,只返回固定列 + if (!isGridInitialized.value) { + return [...fixedColumns]; + } + const columns = [...fixedColumns]; // 安全地添加动态列 @@ -100,12 +105,12 @@ const initDefaultColumns = () => { } }; +// 表格是否已初始化 +const isGridInitialized = ref(false); + // 初始化默认列 initDefaultColumns(); -// 获取设备信息数据 -fetchDeviceOptions(); - const formOptions: VbenFormProps = { schema: querySchema.value, initialValues: { @@ -189,7 +194,7 @@ const gridOptions: VxeGridProps = { highlight: true, labelField: 'name', }, - columns: allColumns, // 使用计算属性 + columns: fixedColumns, // 初始化时只使用固定列 height: 'auto', keepSource: true, pagerConfig: { @@ -323,34 +328,61 @@ watch( }, ); +// 初始化函数 +const initializeGrid = async () => { + try { + // 获取设备信息数据 + await fetchDeviceOptions(); + + // 标记表格已初始化 + isGridInitialized.value = true; + + // 更新表格列定义 + if (gridApi && gridApi.setState) { + await nextTick(); + gridApi.setState({ + gridOptions: { + ...gridOptions, + columns: allColumns.value, + }, + }); + } + + // 如果有路由参数,自动触发查询 + if (DeviceType || DeviceId || FocusAddress || SystemName) { + // 延迟一下确保表格已完全初始化 + setTimeout(() => { + if (gridApi) { + gridApi.reload(); + } + }, 300); + } + } catch (error) { + console.error('初始化表格失败:', error); + } +}; + // 监听路由参数变化,当有路由参数时自动触发查询 watch( () => [DeviceType, DeviceId, FocusAddress, SystemName], async (newValues, oldValues) => { // 如果有路由参数,等待设备信息加载完成后自动触发查询 - if (newValues.some(val => val) && gridApi) { - // 等待设备信息加载完成 - await fetchDeviceOptions(); + if (newValues.some(val => val) && gridApi && isGridInitialized.value) { // 延迟一下确保表单值已经设置 setTimeout(() => { gridApi.reload(); }, 100); } }, - { immediate: true } + { immediate: false } // 改为false,避免立即触发 ); -// 页面初始化时,如果有路由参数则自动触发查询 +// 页面初始化时,延迟初始化表格 onMounted(async () => { - // 如果有路由参数,等待设备信息加载完成后自动触发查询 - if (DeviceType || DeviceId || FocusAddress || SystemName) { - // 等待设备信息加载完成 - await fetchDeviceOptions(); - // 延迟一下确保表单值已经设置 - setTimeout(() => { - gridApi.reload(); - }, 200); - } + // 延迟初始化,确保VXE表格组件已完全挂载 + setTimeout(async () => { + await initializeGrid(); + }, 100); });