修复错误
This commit is contained in:
parent
cd772d5b04
commit
3d4b568a3b
@ -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<any> = {
|
||||
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);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user