动态列成果展示

apps/web-antd/src/views/dataManger/deviceData/index.vue

@@ -30,8 +30,8 @@ const fixedColumns = [
   // 可以在这里添加其他固定列
 ];
 
-// 合并固定列和动态列
-const allColumns = ref([
+// 合并固定列和动态列 - 使用计算属性确保响应式
+const allColumns = computed(() => [
   ...fixedColumns,
   ...dynamicColumns.value,
 ]);
@@ -73,12 +73,13 @@ const formOptions: VbenFormProps = {
     }
   },
 };
+
 const gridOptions: VxeGridProps<any> = {
   checkboxConfig: {
     highlight: true,
     labelField: 'name',
   },
-  columns: allColumns,
+  columns: allColumns, // 使用计算属性
   height: 'auto',
   keepSource: true,
   pagerConfig: {
@@ -98,17 +99,6 @@ const gridOptions: VxeGridProps<any> = {
   proxyConfig: {
     ajax: {
       query: async ({ page }, formValues) => {
-        const { data } = await postTreeModelDeviceDataInfoPage({
-          body: {
-            ...formValues,
-            pageIndex: page.currentPage,
-            pageSize: page.pageSize,
-            DeviceType,
-            DeviceId,
-            FocusAddress,
-          },
-        });
-        
         console.log('=== API调用开始 ===');
         console.log('请求参数:', { page, formValues, DeviceType, DeviceId, FocusAddress });
         
@@ -151,29 +141,33 @@ const gridOptions: VxeGridProps<any> = {
             const generatedColumns = generateDynamicColumns(items);
             console.log('生成的列定义:', generatedColumns);
             
-                      // 更新动态列
-          dynamicColumns.value = generatedColumns;
-          
-          // 更新合并的列定义
-          allColumns.value = [
-            ...fixedColumns,
-            ...generatedColumns,
-          ];
-          
-          // 强制更新列定义
-          await nextTick();
+            // 更新动态列
+            dynamicColumns.value = generatedColumns;
             
-                      // 确保返回的数据包含totalCount字段
-          const result = {
-            items: data.items || [],
-            totalCount: data.totalCount || (data.items ? data.items.length : 0),
-          };
-          console.log('返回给表格的数据:', result);
-          return result;
+            // 使用setState更新整个gridOptions，确保列定义能够正确更新
+            await nextTick();
+            gridApi.setState({
+              gridOptions: {
+                ...gridOptions,
+                columns: allColumns.value,
+              },
+            });
+            
+            // 确保返回的数据包含totalCount字段
+            // 由于API响应中没有totalCount，我们使用items的长度作为总数
+            const result = {
+              items: data.items || [],
+              totalCount: data.items ? data.items.length : 0,
+            };
+            console.log('返回给表格的数据:', result);
+            return result;
           }
           
           console.log('没有数据或数据为空');
-          return data;
+          return {
+            items: [],
+            totalCount: 0,
+          };
         } catch (error) {
           console.error('API调用出错:', error);
           throw error;