表格显示

src/components/Query/clickQuery/MultiLevelQuery.vue

@@ -22,13 +22,10 @@
             <pie class="echart" :class="item.name == '权属' ? 'echart1' : ''" unit="亩" :ref="`echartRef`"></pie>
 
 
-            <div class="content_item" v-for="(item, index) in active_tabs_table" :key="index">
-                <div class="item_field" v-for="(e, index_e) in item" :key="index_e" v-if="e.filedZH != '空间信息'">
-                    <span>{{ e.filedZH }}</span>：
-                    <span>{{ e.data }}</span>
-
-                </div>
-            </div>
+            <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-column>
+            </el-table>
         </el-tab-pane>
 
         <el-tab-pane label="自定义" name="自定义">
@@ -77,10 +74,30 @@ 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 },
+
+                ]
+            ,
         };
     },
     //监听属性 类似于data概念
-    computed: {},
+    computed: {
+
+        transformedData() {
+            // 假设 rawData[0] 总是存在的  
+            return this.rawData.reduce((acc, curr) => {
+                acc[curr.filedZH] = curr.data; // 使用 filedZH 作为键，data 作为值  
+                return acc;
+            }, {});
+        },
+    },
     //监控data中的数据变化
     watch: {},
     //方法集合
@@ -303,6 +320,7 @@ 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]
                         res.value.data.datalist.forEach((res) => {
                             data.push({
                                 name: res.groupvalue,