fix 因为layout布局的content造成的子元素高度100%在360浏览器中造成的不兼容问题

crazyJiaLin · crazyJiaLin · commit 804a67b649d2 · 2019-08-27T15:37:30.000+08:00
---解决办法：不使用antd的layout布局中的content，使用div+calc函数来计算content内容的高度
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="renderer" content="webkit">
     <link rel="icon" href="/static/img/favicon.png" type="image/x-icon">
     <title>权限管理脚手架</title>
   </head>
diff --git a/src/components/m-table/m-table.vue b/src/components/m-table/m-table.vue
@@ -10,7 +10,7 @@
               @close="handleCreateDrawClose"></m-create>
     <m-edit :visible="showEditDrawer" :options="options.operation ? options.operation.edit : {}"
             :record="editRecord" @close="handleEditDrawClose"></m-edit>
-    <a-table :columns="columns" :rowKey="rowKey" :style="options.attribute.tableStyle" :ref="options.id"
+    <a-table :columns="columns" :rowKey="rowKey" :style="options.attribute.tableStyle" :class="options.id"
              :dataSource="dataList" :pagination="pagination"
              :size="options.attribute.size" :bordered="options.attribute.bordered"
              :scroll="finalScroll"
@@ -127,17 +127,17 @@
       // 监听window的resize方法，并加入防抖函数
       window.addEventListener('resize', window.$debounce(() => {
           this.setTableScroll();
-          console.log(this)
         }, 200)
       , false)
     },
     methods: {
       // 设置table的默认Scroll
       setTableScroll() {
-        let tableTop = this.$refs[this.options.id].$el.offsetTop  // table距离文档顶端距离
+        let tableTop = document.querySelector(`.${this.options.id}`).offsetTop  // table距离文档顶端距离
         let viewTop = document.querySelector('.view-template-wrap').offsetTop   // router-view距离文档顶端距离
         let viewHeight = document.querySelector('.view-template-wrap').clientHeight // router-view高度
         this.scroll = {
+          x : true,
           y :  viewHeight - (tableTop - viewTop) - 54 - 65   // 减去的54为table的header高度,64为pagination高度
         }
       },
diff --git a/src/components/m-test/m-test.vue b/src/components/m-test/m-test.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="test-wrap">
+    <div class="test-child">123</div>
   </div>
 </template>
 
@@ -84,6 +85,18 @@
   }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+.test-wrap{
+  width: 200px;
+  height: 300px;
+  .test-child{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: tomato;
+  }
+}
 
 </style>
diff --git a/src/pages/index/index.less b/src/pages/index/index.less
@@ -28,9 +28,9 @@
   }
   .index-content-wrap {
     margin: 15px 10px;
+    height: calc(100% - 64px);
     //padding: 10px;
     background: #fff;
-    minHeight: 280px;
     overflow: auto;
   }
 }
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
@@ -16,9 +16,9 @@
     <a-layout>
       <m-header :collapsed="collapsed" @clickCollBtn="()=> collapsed = !collapsed"></m-header>
 
-      <a-layout-content class="index-content-wrap">
+      <div class="index-content-wrap">
         <router-view></router-view>
-      </a-layout-content>
+      </div>
     </a-layout>
   </a-layout>
 </template>
diff --git a/src/pages/system/sys-user/sys-user-table/sys-user-table.vue b/src/pages/system/sys-user/sys-user-table/sys-user-table.vue
@@ -3,7 +3,7 @@
     <a-table :columns="columns" :rowKey="record => record.record_id"
              :pagination="pagination" size="middle"
              :dataSource="data" :loading="loading" @change="handleTableChange"
-             :scroll="scroll" ref="table">
+             :scroll="scroll" class="sys-user-table">
       <template slot="roles" slot-scope="text, record">
         <span v-for="(item, index) in text" :key="index"> {{item.name}}</span>
       </template>
@@ -85,13 +85,13 @@
             title: '用户名',
             dataIndex: 'user_name',
             align: 'center',
-            width: '200px'
+            width: '180px',
           },
           {
             title: '真实姓名',
             dataIndex: 'real_name',
             align: 'center',
-            width: '200px',
+            width: '150px',
           },
           {
             title: '角色名称',
@@ -104,7 +104,7 @@
             title: '用户状态',
             dataIndex: 'status',
             align: 'center',
-            width: '200px',
+            width: '90px',
             scopedSlots: {customRender: 'status'}
           },
           {
@@ -117,14 +117,7 @@
             title: '手机号',
             dataIndex: 'phone',
             align: 'center',
-            width: '200px',
-          },
-          {
-            title: '创建时间',
-            dataIndex: 'created_at',
-            align: 'center',
-            width: '220px',
-            scopedSlots: {customRender: 'created'},
+            width: '130px',
           },
           {
             title: '操作',
@@ -142,23 +135,25 @@
       // 监听window的resize方法，并加入防抖函数
       window.addEventListener('resize', window.$debounce(() => {
           this.setTableScroll();
-          console.log(this)
         }, 200)
         , false)
     },
     methods: {
       // 设置table的默认Scroll
       setTableScroll() {
         setTimeout(() => {
-          let tableTop = this.$refs.table.$el.offsetTop  // table距离文档顶端距离
+          let tableTop = document.querySelector('.sys-user-table').offsetTop  // table距离文档顶端距离
           let viewTop = document.querySelector('.router-wrap').offsetTop   // router-view距离文档顶端距离
           let viewHeight = document.querySelector('.router-wrap').clientHeight // router-view高度
-          console.log(this.$refs.table.$el, tableTop)
+          console.log(document.querySelector('.sys-user-table'), tableTop)
           console.log(document.querySelector('.router-wrap'), viewTop, viewHeight)
+          let scrollY = viewHeight - (tableTop - viewTop) - 45 - 60 // 减去的45为table的header高度, 60为pagination高度
+          console.log(scrollY)
           this.scroll = {
-            y :  viewHeight - (tableTop - viewTop) - 45 - 60 // 减去的45为table的header高度, 60为pagination高度
+            x: true,
+            y :  scrollY
           }
-        }, 10)
+        }, 50)
 
       },
       onEnable (record_id) {
diff --git a/src/pages/view-template/test-data/query-table布局.js b/src/pages/view-template/test-data/query-table布局.js
@@ -111,6 +111,7 @@ export default [
       bordered: false,
       size : 'default',
       showHeader: true,
+      // 不传自响应
       // scroll:{           // table scroll
       //   x: 300,
       //   y: 100
diff --git a/src/server/server.js b/src/server/server.js
@@ -39,7 +39,7 @@ axios.interceptors.response.use(data=> {
   return data;
 }, err=> {
   // console.error('响应拦截器', err.response.status)
-  if(err.response.status == 401){
+  if(err.response.status == 401 || err.response.status == 400){
     Message.error(err.response.data.error.message);
     let hash = location.hash.split('?')[0];
     let path = hash.slice(1, hash.length);

Original file line number	Diff line number	Diff line change
`@@ -28,9 +28,9 @@`
`28`	`28`	`}`
`29`	`29`	`.index-content-wrap {`
`30`	`30`	`margin: 15px 10px;`
	`31`	`+ height: calc(100% - 64px);`
`31`	`32`	`//padding: 10px;`
`32`	`33`	`background: #fff;`
`33`		`- minHeight: 280px;`
`34`	`34`	`overflow: auto;`
`35`	`35`	`}`
`36`	`36`	`}`