From 3b8eb6c197885faba45faf064e5b034a9cc853bf Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期五, 03 七月 2026 11:58:29 +0800
Subject: [PATCH] 配置调整
---
src/components/Table/lims-table.vue | 92 ++++++++++++++++++++++++++++++++++++----------
1 files changed, 72 insertions(+), 20 deletions(-)
diff --git a/src/components/Table/lims-table.vue b/src/components/Table/lims-table.vue
index 1b698ca..769e168 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"
@@ -39,7 +39,7 @@
<div v-else-if="item.dataType == 'tag'">
<el-tag v-if="
typeof dataTypeFn(scope.row[item.prop], item.formatData) ==
- 'string'
+ 'string' && item.formatType!=null
" :title="scope.row[item.prop] | formatters(item.formatData)"
:type="formatType(scope.row[item.prop], item.formatType)">{{ scope.row[item.prop] |
formatters(item.formatData) }}</el-tag>
@@ -48,7 +48,7 @@
item.formatData
)" v-else-if="
typeof dataTypeFn(scope.row[item.prop], item.formatData) ==
- 'object'
+ 'object' && item.formatType!=null
" :key="index" :title="scope.row[item.prop] | formatters(item.formatData)"
:type="formatType(tag, item.formatType)">{{
item.tagGroup
@@ -57,9 +57,10 @@
: tag
: tag
}}</el-tag>
- <el-tag v-else :title="scope.row[item.prop] | formatters(item.formatData)"
+ <el-tag v-else-if="item.formatType!=null" :title="scope.row[item.prop] | formatters(item.formatData)"
:type="formatType(scope.row[item.prop], item.formatType)">{{ scope.row[item.prop] |
formatters(item.formatData) }}</el-tag>
+ <span v-else>{{scope.row[item.prop] | formatters(item.formatData)}}</span>
</div>
<!-- 鎸夐挳 -->
@@ -70,7 +71,7 @@
:disabled="o.disabled ? o.disabled(scope.row) : false" :icon="iconFn(o)" :plain="o.plain"
:style="{ color: o.name === '鍒犻櫎' ? '#f56c6c' : o.color }" :type="o.type | typeFn(scope.row)"
@click="o.clickFun(scope.row)" :key="key">
- {{ o.name }}
+ {{ typeof o.name === 'function'? o.name(scope.row) : o.name }}
</el-button>
<el-upload :action="javaApi + o.url + '?id=' + (o.uploadIdFun ? o.uploadIdFun(scope.row) : scope.row.id)"
:key="uploadKeys[scope.$index]"
@@ -186,8 +187,12 @@
default: false,
},
height: {
- type: String,
- default: null,
+ type: Number,
+ default: 0,
+ },
+ more:{
+ type:Boolean,
+ default: false,
},
tableLoading: {
type: Boolean,
@@ -198,6 +203,10 @@
default: () => {
return () => { };
},
+ },
+ selectionSelectable: {
+ type: Function,
+ default: () => true,
},
rowClick: {
type: Function,
@@ -275,10 +284,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 +316,45 @@
this.tableData.forEach((_, index) => {
this.$set(this.uploadKeys, index, Date.now());
});
- this.$nextTick(() => {
- if (this.$refs.multipleTable) {
- this.$refs.multipleTable.doLayout();
- }
- });
+ this.calculateSpanInfo();
+ 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) => {
@@ -422,13 +472,15 @@
calculateSpanInfo() {
// 鍒濆鍖栨瘡鍒楃殑鍚堝苟淇℃伅
this.spanList = [];
+ // 璁＄畻鏁版嵁鍒楀湪el-table涓殑鐪熷疄璧峰绱㈠紩锛氬簭鍙峰垪(1鍒�) + 鍙�夌殑閫夋嫨鍒�(1鍒�)
+ const colOffset = this.isSelection ? 2 : 1;
this.column.forEach((m, i) => {
if (m.mergeCol) {
this.spanList.push({
arr: [],
position: 0,
name: m.prop,
- index: i + 1,
+ index: i + colOffset,
});
}
});
@@ -502,19 +554,19 @@
padding-left: 10px !important;
}
-.lims-table .highlight-warning-row-border td:first-child {
+.lims-table >>>.highlight-warning-row-border td:first-child {
border-left: 4px solid #ffcd29;
}
-.lims-table .highlight-warning-row-border td:last-child {
+.lims-table >>>.highlight-warning-row-border td:last-child {
border-right: 4px solid #ffcd29;
}
-.lims-table .highlight-danger-row-border td:first-child {
+.lims-table >>>.highlight-danger-row-border td:first-child {
border-left: 4px solid #f56c6c;
}
-.lims-table .highlight-danger-row-border td:last-child {
+.lims-table >>>.highlight-danger-row-border td:last-child {
border-right: 4px solid #f56c6c;
}
>>>.red-row td {
--
Gitblit v1.9.3