弹窗table修改

src/views/main.vue

@@ -27,7 +27,7 @@
       </Panel>
     </Collapse>
     <Modal v-model="detailModal" width="90%" :footer-hide="true">
-      <Table :columns="columns" :data="detailData" size="small" max-height="500"/>
+      <Table :columns="columns" :data="detailData" size="small" :max-height="tableHeight"/>
     </Modal>
   </div>
 </template>
@@ -110,92 +110,112 @@ export default {
         {
           title: '小区',
           key: 'name',
-          minWidth: 50,
+          minWidth: 100,
+          fixed: 'left',
+          align: 'center',
         },
         {
           title: '楼栋号',
           key: 'buildingNo',
-          minWidth: 50,
+          minWidth: 100,
+          fixed: 'left',
+          align: 'center',
         },
         {
           title: '房屋性质',
           key: 'type',
-          minWidth: 50,
+          minWidth: 100,
+          align: 'center',
         },
         {
           title: '房龄',
           key: 'age',
-          minWidth: 50,
+          minWidth: 100,
+          align: 'center',
         },
         {
           title: '层高',
           key: 'high',
-          minWidth: 50,
+          minWidth: 100,
+          align: 'center',
         },
         {
           title: '4层以上是否有70岁以上老人',
           key: 'hasOld',
-          minWidth: 50,
+          minWidth: 130,
+          align: 'center',
         },
         {
           title: '4层以上是否有行动不便的残障人员',
           key: 'hasDisabled',
-          minWidth: 50,
+          minWidth: 150,
+          align: 'center',
         },
         {
           title: '是否已有业主发起加梯动员',
-          key: 'hasMobilization',
-          minWidth: 50,
+          key: 'hasMobilizatin',
+          minWidth: 130,
+          align: 'center',
         },
         {
           title: '楼内邻里关系是否和睦',
           key: 'hasPeace',
-          minWidth: 50,
+          minWidth: 130,
+          align: 'center',
         },
         {
           title: '楼内业主自住率是否高于80%',
           key: 'hasSelf',
-          minWidth: 50,
+          minWidth: 130,
+          align: 'center',
         },
         {
           title: '一楼是否非居',
           key: 'hasNonliving',
-          minWidth: 50,
+          minWidth: 130,
+          align: 'center',
         },
         {
           title: '是否有地下层',
           key: 'hasUnderground',
-          minWidth: 50,
+          minWidth: 130,
+          align: 'center',
         },
         {
           title: '占用车道',
           key: 'hasLane',
-          minWidth: 50,
+          minWidth: 100,
+          align: 'center',
         },
         {
           title: '占用绿化',
           key: 'hasGreening',
-          minWidth: 50,
+          minWidth: 100,
+          align: 'center',
         },
         {
           title: '占用车位',
           key: 'hasParking',
-          minWidth: 50,
+          minWidth: 100,
+          align: 'center',
         },
         {
           title: '楼间距',
           key: 'spacing',
-          minWidth: 50,
+          minWidth: 100,
+          align: 'center',
         },
         {
           title: '连廊长度',
           key: 'corridorLength',
-          minWidth: 50,
+          minWidth: 100,
+          align: 'center',
         },
         {
           title: '居民意愿',
           key: 'intention',
-          minWidth: 50,
+          minWidth: 100,
+          align: 'center',
         },
       ],
       detailData: [],
@@ -574,6 +594,11 @@ export default {
       // })
     },
   },
+  computed: {
+    tableHeight() {
+      return screen.height / 2
+    }
+  }
 }
 </script>