Browse Source

✨优化表格手机端展示

chuzhixin 4 years ago
parent
commit
dfcf5af442
3 changed files with 9 additions and 2 deletions
  1. 1 1
      src/styles/variables.scss
  2. 1 1
      src/utils/vab.js
  3. 7 0
      src/views/vab/table/index.vue

+ 1 - 1
src/styles/variables.scss

@@ -57,7 +57,7 @@ $base-menu-item-height: 50px;
 //app-main的高度
 $base-app-main-height: calc(
   100vh - #{$base-nav-bar-height} - #{$base-tabs-bar-height} - #{$base-padding} -
-    #{$base-padding} - 55px - 30px
+    #{$base-padding} - 55px - 55px
 );
 //纵向布局时左侧导航未折叠时的宽度
 $base-left-menu-width: 240px;

+ 1 - 1
src/utils/vab.js

@@ -132,7 +132,7 @@ const install = (Vue, opts = {}) => {
     const formHeight = 50
 
     if (layout === 'vertical') {
-      paddingHeight = 340
+      paddingHeight = 365
     }
 
     if ('number' == typeof formType) {

+ 7 - 0
src/views/vab/table/index.vue

@@ -42,6 +42,7 @@
       v-loading="listLoading"
       :data="list"
       :element-loading-text="elementLoadingText"
+      :height="height"
       @selection-change="setSelectRows"
       @sort-change="tableSortChange"
     >
@@ -156,6 +157,12 @@
         },
       }
     },
+    computed: {
+      height() {
+        alert(this.$baseTableHeight())
+        return this.$baseTableHeight()
+      },
+    },
     created() {
       this.fetchData()
     },