展示出来了

src/components/Query/clickQuery/MultiLevelQuery.vue

@@ -21,9 +21,8 @@
             v-for="(item, index) in store.state.query_pick_pane" :key="index">
             <pie class="echart" :class="item.name == '权属' ? 'echart1' : ''" unit="亩" :ref="`echartRef`"></pie>
 
-
-            <el-table :data="[transformedData]" border style="width: 100%">
-                <el-table-column v-for="(value, key) in transformedData" :key="key" :label="key" :prop="key">
+            <el-table :data="tableData" border style="width: 100%">
+                <el-table-column v-for="header in headers" :key="header" :label="header" :prop="header" v-if="header != '空间信息'">
                 </el-table-column>
             </el-table>
         </el-tab-pane>
@@ -74,28 +73,35 @@ export default {
             activecheckList: [],
             check_list: [{ label: '三调', ckeck: true }, { label: '权属', ckeck: true }, { label: '农用' }, { label: '上映' }],
             active_tabs_table: [],
-            rawData:
-                [
-                    // ... 你的数据项  
-                    { "filed": "xzmc", "filedZH": "行政名称", "data": "吉阳区/天涯区" },
-                    // ... 其他数据项  
-                    { "filed": "siweiarea", "filedZH": "空间面积（平方米）", "data": 82.37 },
-                    { "filed": "siweiarea", "filedZH": "空间面积1（平方米）", "data": 82.37 },
-                    { "filed": "siweiarea", "filedZH": "空间面积2（平方米）", "data": 82.37 },
-
-                ]
-            ,
+            rawData:[],
+            headers: [], // 用于存储所有可能的 filedZH 值  
         };
     },
     //监听属性 类似于data概念
     computed: {
-
-        transformedData() {
-            // 假设 rawData[0] 总是存在的  
-            return this.rawData.reduce((acc, curr) => {
-                acc[curr.filedZH] = curr.data; // 使用 filedZH 作为键，data 作为值  
-                return acc;
-            }, {});
+        tableData() {
+            // 首次加载时确定所有可能的 filedZH 值  
+            // if (!this.headers.length) {
+                this.rawData.forEach(item => {
+                    item.forEach(field => {
+                        if (!this.headers.includes(field.filedZH)) {
+                            this.headers.push(field.filedZH);
+                        }
+                    });
+                });
+            // }
+
+            // 转换 rawData 为适合 el-table 使用的格式  
+            return this.rawData.map(item => {
+                // 创建一个包含所有 headers 字段的对象  
+                const row = {};
+                this.headers.forEach(header => {
+                    // 查找当前数据项中对应 filedZH 的 data 值  
+                    const field = item.find(f => f.filedZH === header);
+                    row[header] = field ? field.data : ''; // 如果没有找到，则使用空字符串  
+                });
+                return row;
+            });
         },
     },
     //监控data中的数据变化
@@ -320,7 +326,8 @@ export default {
 
                         this.active_tabs_table = res.value.data.data;
                         console.log('this.active_tabs_table: ', this.active_tabs_table);
-                        this.rawData = res.value.data.data[0]
+                        this.rawData = res.value.data.data
+                        console.log('this.rawData: ', this.rawData);
                         res.value.data.datalist.forEach((res) => {
                             data.push({
                                 name: res.groupvalue,