动态列成果展示

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 });
         
@@ -154,26 +144,30 @@ const gridOptions: VxeGridProps<any> = {
             // 更新动态列
             dynamicColumns.value = generatedColumns;
             
-          // 更新合并的列定义
+            // 使用setState更新整个gridOptions，确保列定义能够正确更新
-          allColumns.value = [
-            ...fixedColumns,
-            ...generatedColumns,
-          ];
-          
-          // 强制更新列定义
             await nextTick();
+            gridApi.setState({
+              gridOptions: {
+                ...gridOptions,
+                columns: allColumns.value,
+              },
+            });
             
             // 确保返回的数据包含totalCount字段
+            // 由于API响应中没有totalCount，我们使用items的长度作为总数
             const result = {
               items: data.items || [],
-            totalCount: data.totalCount || (data.items ? data.items.length : 0),
+              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;