动态更改table高度

src/views/volunteer/zyzsjgl/bqhgl/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="app-container">
+  <div class="app-container" ref="apps">
-    <div class="titleInput">
+    <div class="titleInput" ref="titleInput">
       <el-input
         placeholder="请输入关键字"
         v-model="input3"
@@ -30,7 +30,9 @@
         </div>
       </div>
     </div>
-    <myPagination></myPagination>
+    <div class="pagination" ref="pagination">
+      <my-pagination :total="total" @pagesChange="pagesChange"></my-pagination>
+    </div>
   </div>
 </template>
 
@@ -41,16 +43,32 @@ export default {
   data() {
     return {
       input3: "",
-      total:0
+      total: 0,
+      // peopleHeight: 0,
     };
   },
+  methods: {
+    pagesChange() {},
+  },
   components: {
     myPagination,
   },
+  created() {
+    // this.$nextTick(() => {
+    //   this.peopleHeight =
+    //     this.$refs.apps.offsetHeight -
+    //     80 -
+    //     this.$refs.titleInput.offsetHeight -
+    //     this.$refs.pagination.offsetHeight;
+    //   console.log(this.peopleHeight);
+    // });
+  },
+  mounted() {},
 };
 </script>
 
 <style lang="scss" scoped>
+
 ::v-deep .titleInput .el-input__inner {
   border-right: none;
 }

src/views/volunteer/zyzsjgl/hdgl/index.vue

@@ -7,8 +7,8 @@
  * @LastEditTime: 2023-09-18 15:34:55
 -->
 <template>
-  <div class="plan-management">
+  <div class="plan-management" ref="plan">
-    <div class="titleInput">
+    <div class="titleInput" ref="titleInput">
       <el-input
         placeholder="请输入关键字"
         v-model="input3"
@@ -17,7 +17,7 @@
         <el-button slot="append" icon="el-icon-search"></el-button>
       </el-input>
     </div>
-    <div>
+    <div ref="elbtn">
       <el-button type="primary" plain @click="addActivity">新增活动</el-button>
     </div>
     <div class="plan-bottomBox">
@@ -25,7 +25,8 @@
         <el-table
           :data="tableData"
           :border="false"
-          :height="470"
+          :height="tableHeight"
+          ref="table"
           v-loading="loading"
           tooltip-effect="light"
           :row-class-name="tableRowClassName"
@@ -72,7 +73,7 @@
           </el-table-column>
         </el-table>
       </div>
-      <div class="pagination">
+      <div class="pagination" ref="pagination">
         <my-pagination
           :total="total"
           @pagesChange="pagesChange"
@@ -298,7 +299,10 @@
             </el-form-item>
           </div>
           <el-form-item label="活动举办方:" prop="name">
-            <el-input v-model="ruleForm1.a5" placeholder="请输入内容"></el-input>
+            <el-input
+              v-model="ruleForm1.a5"
+              placeholder="请输入内容"
+            ></el-input>
           </el-form-item>
         </el-form>
         <!-- 人员要求信息 -->
@@ -513,7 +517,7 @@ export default {
           label: "男",
         },
       ],
-      options5: [
+      options6: [
         {
           value: "选项1",
           label: "中国",
@@ -541,9 +545,9 @@ export default {
       rules2: {
         name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
       },
+      tableHeight:0,
     };
   },
-
   methods: {
     //打开新增
     addActivity() {
@@ -559,7 +563,7 @@ export default {
     },
     //关闭详情
     closeDetail() {
-      this.dialogVisible = false
+      this.dialogVisible = false;
     },
     //修改
     update() {
@@ -593,7 +597,17 @@ export default {
       }
     },
   },
-  async created() {},
+  mounted() {
+    this.$nextTick(() => {
+      this.tableHeight =
+        this.$refs.plan.offsetHeight -
+        80 -
+        this.$refs.titleInput.offsetHeight -
+        this.$refs.elbtn.offsetHeight -
+        this.$refs.pagination.offsetHeight;
+        console.log(this.$refs.table.offsetHeight);
+    });
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -699,7 +713,7 @@ export default {
       }
     }
     .pagination {
-      margin-top: 10px;
+      margin-top: 20px;
     }
   }
 }

src/views/volunteer/zyzsjgl/zdgl/index.vue

@@ -7,8 +7,8 @@
  * @LastEditTime: 2023-09-18 15:34:55
 -->
 <template>
-  <div class="plan-management">
+  <div class="plan-management" ref="plan">
-    <div class="titleInput">
+    <div class="titleInput" ref="titleInput">
       <el-input
         placeholder="请输入关键字"
         v-model="input3"
@@ -17,7 +17,7 @@
         <el-button slot="append" icon="el-icon-search"></el-button>
       </el-input>
     </div>
-    <div>
+    <div ref="elbtn">
       <el-button type="primary" plain @click="addDist">新增标签字典</el-button>
     </div>
     <div class="plan-bottomBox">
@@ -25,7 +25,7 @@
         <el-table
           :data="tableData"
           :border="false"
-          :height="440"
+          :height="tableHeight"
           v-loading="loading"
           tooltip-effect="light"
           :row-class-name="tableRowClassName"
@@ -67,7 +67,7 @@
           </el-table-column>
         </el-table>
       </div>
-      <div class="pagination">
+      <div class="pagination" ref="pagination"> 
         <my-pagination
           :total="total"
           @pagesChange="pagesChange"
@@ -196,6 +196,7 @@ export default {
         name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
       },
       dialogVisible: false,
+      tableHeight:0,
     };
   },
 
@@ -241,7 +242,16 @@ export default {
       }
     },
   },
-  async created() {},
+  mounted() {
+    this.$nextTick(() => {
+      this.tableHeight =
+        this.$refs.plan.offsetHeight -
+        80 -
+        this.$refs.titleInput.offsetHeight -
+        this.$refs.elbtn.offsetHeight -
+        this.$refs.pagination.offsetHeight;
+    });
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -347,7 +357,7 @@ export default {
       }
     }
     .pagination {
-      margin-top: 10px;
+      margin-top:20px;
     }
   }
 }