From 3115fcc80036ec4bfe3a2cd1128c5fdc82a01f42 Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期二, 28 四月 2026 16:38:27 +0800
Subject: [PATCH] limsTable表格自适应高度&手动下单调整
---
src/components/Table/lims-table.vue | 70 +++++++++++++++++++++++++++++-----
1 files changed, 59 insertions(+), 11 deletions(-)
diff --git a/src/components/Table/lims-table.vue b/src/components/Table/lims-table.vue
index 6e3cec6..146e6ab 100644
--- a/src/components/Table/lims-table.vue
+++ b/src/components/Table/lims-table.vue
@@ -2,11 +2,11 @@
<div>
<!-- 琛ㄦ牸 -->
<el-table ref="multipleTable" v-loading="tableLoading" :border="border" :data="tableData"
- :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" :height="height"
+ :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" :height="tableHeight"
:highlight-current-row="highlightCurrentRow" :row-class-name="rowClassName" :row-style="rowStyle"
:row-key="rowKey" :span-method="spanMethod" :show-summary="showSummary" :summary-method="summaryMethod" stripe style="width: 100%" tooltip-effect="dark" @row-click="rowClick"
@current-change="currentChange" @selection-change="handleSelectionChange" class="lims-table">
- <el-table-column align="center" type="selection" width="55" v-if="isSelection" />
+ <el-table-column align="center" type="selection" width="55" :selectable="selectionSelectable" v-if="isSelection" />
<el-table-column align="center" label="搴忓彿" type="index" width="60" :index="indexMethod" />
<el-table-column v-for="(item, index) in column" :key="index" :column-key="item.columnKey"
@@ -186,8 +186,12 @@
default: false,
},
height: {
- type: String,
- default: null,
+ type: Number,
+ default: 0,
+ },
+ more:{
+ type:Boolean,
+ default: false,
},
tableLoading: {
type: Boolean,
@@ -198,6 +202,10 @@
default: () => {
return () => { };
},
+ },
+ selectionSelectable: {
+ type: Function,
+ default: () => true,
},
rowClick: {
type: Function,
@@ -275,10 +283,22 @@
btnWidth: "120px",
uploadRefs: [],
currentFiles: {}, // 鐢ㄤ簬瀛樺偍姣忚鐨勫綋鍓嶆枃浠�
- uploadKeys: {} // 鐢ㄤ簬鍔ㄦ�侀噸缃粍浠�
+ uploadKeys: {}, // 鐢ㄤ簬鍔ㄦ�侀噸缃粍浠�
+ tableHeight:0,
+ resizeHandler: null, // 闃叉姈鍑芥暟寮曠敤
};
},
+ created(){
+ this.calcTableHeight()
+ this.resizeHandler = this.debounce(() => {
+ this.calcTableHeight();
+ }, 200);
+ },
+ beforeDestroy(){
+ window.removeEventListener("resize",this.resizeHandler)
+ },
mounted() {
+ window.addEventListener("resize",this.resizeHandler)
this.calculateSpanInfo();
this.$nextTick(() => {
this.$refs.multipleTable.doLayout();
@@ -295,16 +315,44 @@
this.tableData.forEach((_, index) => {
this.$set(this.uploadKeys, index, Date.now());
});
- this.$nextTick(() => {
- if (this.$refs.multipleTable) {
- this.$refs.multipleTable.doLayout();
- }
- });
+ this.refreshTableLayout();
},
immediate: true
- }
+ },
+ more() {
+ this.refreshTableLayout();
+ },
+ height() {
+ this.refreshTableLayout();
+ },
},
methods: {
+ refreshTableLayout() {
+ this.$nextTick(() => {
+ this.calcTableHeight();
+ if (this.$refs.multipleTable) {
+ this.$refs.multipleTable.doLayout();
+ }
+ });
+ },
+ calcTableHeight(){
+ const innerHeight = window.innerHeight;
+ const naviHeight = 96;//瀵艰埅鏍忛珮搴�
+ const pageHeight = this.page?52:0;//鍒嗛〉缁勪欢楂樺害
+ const mainMarginHeight = 40;//涓荤粍浠朵笂涓嬮棿璺�
+ const otherHeight = this.height;//鍏朵綑楂樺害
+ const searchHeight = this.more?101:51;//鎼滅储鏍忛珮搴�
+
+ this.tableHeight = innerHeight - naviHeight - pageHeight - mainMarginHeight - otherHeight - searchHeight
+ },
+ //闃叉姈鍑芥暟
+ debounce(fn, delay) {
+ let timer = null;
+ return (...args) => {
+ clearTimeout(timer);
+ timer = setTimeout(() => fn.apply(this, args), delay);
+ };
+ },
getWidth(row, row0) {
let count = 0;
row.forEach((a) => {
--
Gitblit v1.9.3