自适应高度

src/views/index/index.vue

@@ -23,7 +23,7 @@
     </div>
     <!--表格-->
     <div class="bg_white table_90 m-t-10 border-r-10 text-black f-12">
-      <vxe-table border resizable show-overflow height="700" :scroll-x="{ enabled: false }"
+      <vxe-table border resizable show-overflow :height="tableHeight" :scroll-x="{ enabled: false }"
         :scroll-y="{ enabled: false }" :header-row-style="header_style" :data="tableData" :edit-config="editConfig">
         <vxe-colgroup title="基本信息" header-align="center" fixed="left" resizable>
           <vxe-column field="picture" title="图片" width="80" header-align="center" align="center" class="position-r">
@@ -429,6 +429,7 @@ export default {
       enlargeImgShow: false,
       enlargeImg: '',
       top: '',
+      tableHeight: 700, // 表格高度，会动态计算
       remark_level: [] // 绩效提成经营分析品线等级下拉选择
     }
   },
@@ -449,12 +450,36 @@ export default {
   created () {
     this.getList()
   },
+  mounted() {
+    // 组件挂载后计算表格高度
+    this.calculateTableHeight();
+    // 监听窗口大小变化，动态调整表格高度
+    window.addEventListener('resize', this.calculateTableHeight);
+  },
+  beforeDestroy() {
+    // 组件销毁前移除事件监听
+    window.removeEventListener('resize', this.calculateTableHeight);
+  },
   methods: {
     updateRemark(val, rowIndex){
       // 根据选中的二级品线查找对应的一级品线
       const item = this.remark_level.find(i => i && i.remark_two === val.value);
       this.tableData[rowIndex].remark1 = item.remark_one;
     },
+    // 计算表格自适应高度
+    calculateTableHeight() {
+      // 获取浏览器窗口高度
+      const windowHeight = window.innerHeight;
+      // 获取表格容器上方元素的高度（这里需要根据实际情况调整）
+      // 假设上方操作栏和标题区域大约占用200px
+      const headerHeight = 200;
+      // 计算表格可用高度，减去一些边距和预留空间
+      this.tableHeight = windowHeight - headerHeight - 30; // 30px作为底部边距预留
+      // 确保表格高度不会太小
+      if (this.tableHeight < 300) {
+        this.tableHeight = 300;
+      }
+    },
     enlarge (e, row) {
       console.log(e)
       this.enlargeImg = row.picture