列表页面固定滚动条在底部

src/views/ecw/customer/index.vue

@@ -211,7 +211,7 @@
     </el-row>
 
     <!-- 列表 -->
-    <el-table ref="multipleTable" border v-loading="loading" :data="list" @selection-change="handleSelectionChange">
+    <el-table ref="multipleTable" border v-loading="loading" :data="list" @selection-change="handleSelectionChange" id="dataTable" :height="autoHeight">
       <el-table-column type="selection" width="55" fixed></el-table-column>
       <el-table-column :label="$t('客户编号')" align="center" fixed>
         <template v-slot="{ row }">
@@ -905,7 +905,8 @@ export default {
       productTypeList: [],
       productList: [],
       competitorList: [],
-      deptList: []
+      deptList: [],
+      autoHeight: 500
     }
   },
   computed: {
@@ -1380,6 +1381,10 @@ export default {
       this.list = response.data.list
       this.total = response.data.total
       this.loading = false
+
+      this.$nextTick(() => {
+        this.getHeight()
+      })
     },
     /** 提交按钮 */
     submitForm() {
@@ -1525,7 +1530,20 @@ export default {
       } else {
         return null
       }
-    }
+    },
+    //表格高度自适应
+    getHeight() {
+      let getHeightFromBottom = (element, variableHeight) => {
+        const elementRect = element.getBoundingClientRect().top;
+        const windowHeight = window.innerHeight;
+        const elementHeightFromBottom = windowHeight - elementRect;
+        const result = elementHeightFromBottom - variableHeight;
+        return result;
+      }
+      const element = document.getElementById('dataTable');
+      const variableHeight = 70; // 给定的变量高度 一般留于分页器高度
+      this.autoHeight =getHeightFromBottom(element, variableHeight)  ;
+    },
   }
 }
 </script>

src/views/ecw/myCustomerService/index.vue

@@ -187,7 +187,7 @@
     </el-row>
 
     <!-- 列表 -->
-    <el-table ref="multipleTable" border v-loading="loading" :data="list" @selection-change="handleSelectionChange">
+    <el-table ref="multipleTable" border v-loading="loading" :data="list" @selection-change="handleSelectionChange" id="dataTable" :height="autoHeight">
       <el-table-column type="selection" width="55" fixed></el-table-column>
       <el-table-column :label="$t('客户编号')" align="center" fixed>
         <template v-slot="{ row }">
@@ -628,7 +628,8 @@ export default {
       productTypeList: [],
       productList: [],
       competitorList: [],
-      deptList: []
+      deptList: [],
+      autoHeight: 500
     }
   },
   activated() {
@@ -694,6 +695,7 @@ export default {
         this.list = response.data.list
         this.total = response.data.total
         this.loading = false
+        this.getHeight()
       })
     },
     remoteMethod(val) {
@@ -970,7 +972,20 @@ export default {
       } else {
         return null
       }
-    }
+    },
+    //表格高度自适应
+    getHeight() {
+      let getHeightFromBottom = (element, variableHeight) => {
+        const elementRect = element.getBoundingClientRect().top;
+        const windowHeight = window.innerHeight;
+        const elementHeightFromBottom = windowHeight - elementRect;
+        const result = elementHeightFromBottom - variableHeight;
+        return result;
+      }
+      const element = document.getElementById('dataTable');
+      const variableHeight = 70; // 给定的变量高度 一般留于分页器高度
+      this.autoHeight =getHeightFromBottom(element, variableHeight)  ;
+    },
   },
   watch: {
     selectCustomerList(val) {

src/views/ecw/oceanCustomer/index.vue

@@ -219,6 +219,7 @@
       v-loading="loading"
       :data="list"
       @selection-change="handleSelectionChange"
+      id="dataTable" :height="autoHeight"
     >
       <el-table-column type="selection" width="55" fixed></el-table-column>
       <el-table-column :label="$t('客户编号')" align="center" fixed>
@@ -654,6 +655,7 @@ export default {
       productList: [],
       competitorList: [],
       deptList: [],
+      autoHeight: 500
     };
   },
   created() {
@@ -777,6 +779,7 @@ export default {
         this.list = response.data.list;
         this.total = response.data.total;
         this.loading = false;
+        this.getHeight();
       });
     },
     remoteMethod(val) {
@@ -1066,6 +1069,19 @@ export default {
         return null
       }
     },
+    //表格高度自适应
+    getHeight() {
+      let getHeightFromBottom = (element, variableHeight) => {
+        const elementRect = element.getBoundingClientRect().top;
+        const windowHeight = window.innerHeight;
+        const elementHeightFromBottom = windowHeight - elementRect;
+        const result = elementHeightFromBottom - variableHeight;
+        return result;
+      }
+      const element = document.getElementById('dataTable');
+      const variableHeight = 70; // 给定的变量高度 一般留于分页器高度
+      this.autoHeight =getHeightFromBottom(element, variableHeight)  ;
+    },
   },
 };
 </script>

src/views/ecw/offer/logListCommon.vue

@@ -88,7 +88,7 @@
         </el-col>
         <right-toolbar :showSearch.sync="showSearch" @queryTable="getDataSpaceCustomerFollowupList"></right-toolbar>
       </el-row>
-      <el-table ref="multipleTable" border :data="customerFollowList" v-loading="loading" @selection-change="handleSelectionChange" style="width: 100%">
+      <el-table ref="multipleTable" border :data="customerFollowList" v-loading="loading" @selection-change="handleSelectionChange" style="width: 100%" id="dataTable" :height="autoHeight">
         <el-table-column type="selection" width="55" fixed></el-table-column>
         <el-table-column prop="customerNumber" :label="$t('客户编号')" width="120" fixed>
           <template slot-scope="scope">
@@ -198,7 +198,8 @@ export default {
         followTime: ["", ""],
         nextTime: ["", ""],
         customerCreateTime: ["", ""]
-      }
+      },
+      autoHeight: 500
     }
   },
   created() {
@@ -316,6 +317,7 @@ export default {
         this.customerFollowList = r.data.list
         this.customerFollowTotal = r.data.total
         this.loading = false
+        this.getHeight()
       })
     },
     reset() {
@@ -328,7 +330,20 @@ export default {
         pageSize: 10
       }
       this.getDataSpaceCustomerFollowupList()
-    }
+    },
+    //表格高度自适应
+    getHeight() {
+      let getHeightFromBottom = (element, variableHeight) => {
+        const elementRect = element.getBoundingClientRect().top;
+        const windowHeight = window.innerHeight;
+        const elementHeightFromBottom = windowHeight - elementRect;
+        const result = elementHeightFromBottom - variableHeight;
+        return result;
+      }
+      const element = document.getElementById('dataTable');
+      const variableHeight = 70; // 给定的变量高度 一般留于分页器高度
+      this.autoHeight =getHeightFromBottom(element, variableHeight)  ;
+    },
   }
 }
 </script>

src/views/ecw/order/index.vue

@@ -201,7 +201,7 @@
     </el-row>
 
     <!-- 列表 -->
-    <el-table v-loading="loading" border :data="list" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" border :data="list" @selection-change="handleSelectionChange" id="dataTable" :height="autoHeight">
       <el-table-column type="selection" width="55" align="center" />
 
       <el-table-column :label="$t('订单编号')" width="120px" align="center" prop="orderNo" fixed>
@@ -843,7 +843,8 @@ export default {
       pickRatio: {
         key: "eqPickRatio",
         value: ""
-      }
+      },
+      autoHeight: 500
     }
   },
   watch: {
@@ -1314,6 +1315,7 @@ export default {
         this.list = []
         this.$nextTick(() => {
           this.list = response.data.list
+          this.getHeight()
         })
         this.total = response.data.total
         this.loading = false
@@ -1499,7 +1501,20 @@ export default {
     // 自动去除空格
     replaceSpace(obj, field) {
       obj[field] = obj[field].replace(/\s+/g, "")
-    }
+    },
+    //表格高度自适应
+    getHeight() {
+      let getHeightFromBottom = (element, variableHeight) => {
+        const elementRect = element.getBoundingClientRect().top;
+        const windowHeight = window.innerHeight;
+        const elementHeightFromBottom = windowHeight - elementRect;
+        const result = elementHeightFromBottom - variableHeight;
+        return result;
+      }
+      const element = document.getElementById('dataTable');
+      const variableHeight = 70; // 给定的变量高度 一般留于分页器高度
+      this.autoHeight =getHeightFromBottom(element, variableHeight)  ;
+    },
   }
 }
 </script>