信件管理界面优化完善，设定表格高度动态

src/components/ManageMail.vue

@@ -61,46 +61,41 @@
         </el-row>
     </el-form>
 
-    <el-table :data="tableData" border height="600px" table-layout="fixed"
-        :header-cell-style="{ 'background-color': '#EBEEFC', 'color': '#1D2C86' }">
-        <el-table-column fixed="left" prop="id" label="案件编号" width="200px">
-        </el-table-column>
-        <el-table-column prop="createTime" label="来信日期" width="120px">
-        </el-table-column>
-        <el-table-column prop="contactName" label="联系人姓名" width="100px">
-        </el-table-column>
-        <!-- todo 联系人身份证号码和联系人手机号码的需要脱敏 -->
-        <el-table-column prop="contactIdCard" label="联系人身份证号码" width="300px">
-        </el-table-column>
-        <el-table-column prop="contactPhone" label="联系人手机号码" width="200px">
-        </el-table-column>
-        <el-table-column prop="content" label="信件内容" width="400px" :show-overflow-tooltip="true">
-            <!-- <template v-slot="scope">
-                <el-popover trigger="hover" placement="top-start" title="信件内容" width="500"
-                    v-model="scope.row.popoverVisible">
-                    <p>{{ scope.row.content }}</p>
-                    <div slot="reference" class="name-wrapper">
-                        <el-tag size="medium">{{ scope.row.content }}</el-tag>
-                    </div>
-                </el-popover>
-            </template> -->
-        </el-table-column>
-        <el-table-column prop="evaluate" label="评价结果" width="100px">
-        </el-table-column>
-        <el-table-column fixed="right" label="详情" width="100">
-            <template v-slot="scope">
-                <el-button @click="handleDetail(scope.$index + 1)">详情</el-button>
-            </template>
-        </el-table-column>
-    </el-table>
-    <el-pagination background @size-change="handleSizeChange" @current-change="handlePageChange"
-        :current-page="pageData.currentPage" :page-sizes="[4, 10, 20, 40, 50]" :page-size="pageData.pageSize"
-        layout="total,sizes, prev, pager, next, jumper" :total="pageData.totalSize">
-    </el-pagination>
+    <div class="table-box" ref="tableBoxHeight">
+        <el-table :data="tableData" border :height="tableHeight" table-layout="fixed"
+            :header-cell-style="{ 'background-color': '#EBEEFC', 'color': '#1D2C86' }">
+            <el-table-column fixed="left" prop="id" label="案件编号" width="200px">
+            </el-table-column>
+            <el-table-column prop="createTime" label="来信日期" width="120px">
+            </el-table-column>
+            <el-table-column prop="contactName" label="联系人姓名" width="100px">
+            </el-table-column>
+            <!-- todo 联系人身份证号码和联系人手机号码的需要脱敏 -->
+            <el-table-column prop="contactIdCard" label="联系人身份证号码" width="300px">
+            </el-table-column>
+            <el-table-column prop="contactPhone" label="联系人手机号码" width="200px">
+            </el-table-column>
+            <el-table-column prop="content" label="信件内容" width="400px" :show-overflow-tooltip="true">
+            </el-table-column>
+            <el-table-column prop="satisfaction" label="评价结果" width="100px">
+            </el-table-column>
+            <el-table-column fixed="right" label="详情" width="100">
+                <template v-slot="scope">
+                    <el-button @click="handleDetail(scope.$index + 1)">详情</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div style="display: flex; justify-content: center;">
+            <el-pagination background @size-change="handleSizeChange" @current-change="handlePageChange"
+                :current-page="pageData.currentPage" :page-sizes="[4, 10, 20, 40, 50]" :page-size="pageData.pageSize"
+                layout="total,sizes, prev, pager, next, jumper" :total="pageData.totalSize">
+            </el-pagination>
+        </div>
+    </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 import axios from 'axios'
 import { onMounted, onUpdated } from 'vue';
 import router from '../router';
@@ -143,11 +138,8 @@ onMounted(() => {
         })
         .catch(function (error) { console.log(error) })
 })
-
-onUpdated(() => {
-    console.log('updated')
-})
-
+const tableBoxHeight = ref(null)
+const tableHeight = ref('100%')
 const flexColumnWidth = (label, prop) => {
     const width = Math.max(label.length * 12, 120)
     return `${width}px`
@@ -238,4 +230,9 @@ const out = () => {
     margin-right: 30px;
     margin-bottom: 5px;
 }
+
+.table-box {
+    /* 全屏时顶部元素总和284px */
+    height: calc(100vh - 316px);
+}
 </style>