From 5e78e5bc69a8b7abf76663acaab6b7da63f35aa2 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期一, 30 九月 2024 14:40:50 +0800
Subject: [PATCH] table Height
---
src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue | 343 ++++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 266 insertions(+), 77 deletions(-)
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
index f1f59ae..66dd8cd 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
@@ -1,22 +1,23 @@
<!-- 鏌ヨ鏈�鏂拌鍛婁俊鎭� -->
<template>
<div>
- <span v-if="data?.title" class="text-base font-bold flex-center mb-5">{{ data?.title }}</span>
- <div class="w-full" style="height: 70vh" ref="containerRef" v-resize="resizeHandler">
+ <!-- <span v-if="data?.title" class="text-base font-bold flex-center mb-5">{{ data?.title }}</span> -->
+ <div class="w-full flex-column" ref="containerRef" v-resize="resizeHandler">
<el-table
ref="tableRef"
+ :height="tableHeight"
border
- :cell-style="{ textAlign: 'center' }"
- :header-cell-style="{ textAlign: 'center' }"
- :data="data?.values"
- highlight-current-row
+ :cell-style="tableCellStyle"
+ :header-cell-style="tableHeaderCellStyle"
+ :data="chunkTableData[pager.index - 1]"
+ :spanMethod="objectSpanMethod"
class="w-full h-full"
cellClassName="text-sm"
headerCellClassName="text-sm"
>
- <template v-if="data?.cols?.length > 0">
+ <DefineColumns v-slot="{ cols }">
<el-table-column
- v-for="(item, index) in colList"
+ v-for="(item, index) in cols"
:label="item.title"
:width="item.width"
:sortable="item.type === 'time'"
@@ -24,108 +25,292 @@
:prop="index + ''"
show-overflow-tooltip
/>
+ </DefineColumns>
+ <el-table-column v-if="data?.title" :label="data?.title" show-overflow-tooltip>
+ <template v-if="data?.cols?.length > 0">
+ <el-table-column
+ v-for="(item, index) in colList"
+ :label="item.title"
+ :width="item.width"
+ :sortable="item.type === 'time'"
+ :key="index"
+ :prop="index + ''"
+ show-overflow-tooltip
+ />
+ </template>
+ </el-table-column>
+ <template v-else>
+ <template v-if="data?.cols?.length > 0">
+ <ReuseColumns :cols="colList" />
+ </template>
</template>
</el-table>
+ <el-pagination
+ style="margin-bottom: 0 !important; margin-left: auto !important; float: none !important"
+ small
+ hide-on-single-page
+ v-model:current-page="pager.index"
+ v-model:page-size="pager.size"
+ layout="total,prev,pager,next,jumper"
+ :total="pager.total"
+ @current-change="handleCurrentChange"
+ />
</div>
</div>
</template>
<script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core';
import type { TableInstance } from 'element-plus';
import _ from 'lodash';
-import { onMounted, ref, type PropType } from 'vue';
+import { CSSProperties, onMounted, reactive, ref, type PropType, nextTick } from 'vue';
+import { BORDER_COLOR, COL_HEADER_CELL_BG_COLOR, THICK_BORDER_WIDTH } from '../deviceLastValue/constants';
import { debounce, getTextWidth } from '/@/utils/util';
-
const props = defineProps({
data: {
type: Object as PropType<any>,
},
});
+const [DefineColumns, ReuseColumns] = createReusableTemplate<{
+ cols: any[];
+}>();
+// props.data.title = '鍝堝搱鍝堝搱鍝�';
+
const colList = ref([]);
const containerRef = ref<HTMLDivElement>(null);
const tableRef = ref<TableInstance>(null);
const measureWidthOffset = 28;
+const groupColIndex = [];
+(props.data?.cols ?? []).map((item, index) => {
+ if (item.group) {
+ groupColIndex.push(index);
+ }
+});
+const chunkTableData = ref([props.data?.values]);
+
+const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
+ if (groupColIndex.includes(columnIndex)) {
+ return {
+ rowspan: row.rowspan,
+ colspan: 1,
+ };
+ }
+};
+
+/**
+ * 鏋勫缓鍒嗙粍缁撴瀯
+ */
+const buildGroupData = () => {
+ const groupData = _.groupBy(props.data.values, (item, index) => {
+ // 鎵惧嚭鎵�鏈夐渶瑕� group 鐨勫�硷紝鍔犺捣鏉�
+ const groupKey = item.reduce((preVal, curVal, index) => {
+ const isGroup = props.data.cols[index].group;
+ if (isGroup) {
+ preVal += curVal;
+ }
+ return preVal;
+ }, '');
+ return groupKey;
+ });
+
+ // 閲嶆柊鎺掑竷涓�涓嬩綅缃紝淇濊瘉 group 鐩搁偦锛屽悓鏃舵墦涓� rowspan
+ props.data.values = Object.values(groupData).reduce((preVal, curVal) => {
+ curVal.map((item, index, array) => {
+ item.rowspan = index === 0 ? array.length : undefined;
+ });
+ preVal = preVal.concat(curVal);
+ return preVal;
+ }, []);
+};
+
+/**
+ * 璁＄畻姣忎竴鍒楃殑瀹藉害
+ * 1锛夋�诲灏忎簬瀹瑰櫒瀹斤細鐩存帴鎸夋瘮渚嬪垎
+ * 2锛夋�诲澶т簬瀹瑰櫒瀹斤細鍏堝畬鍏ㄦ弧瓒虫渶灏忕殑瀹藉害锛岀洿鍒板埌涓嶆弧瓒冲搴︾殑鍦版柟锛岀劧鍚庡墿浣欏搴︼紝鎸夊搴︽瘮渚嬪垎閰�
+ * 3锛夎绠楀畬鐨勫搴︽斁鍦� colList.value 鐨� width 灞炴�т笂
+ * @param width
+ */
+const calcColWidth = (width) => {
+ const maxStrList = props.data.cols.map((item) => item.title);
+ const maxLenList = props.data.cols.map((item) => item.title.gblen());
+ for (const item of props.data.values) {
+ item.map((subItem, index) => {
+ const subItemLen = subItem?.gblen();
+ if (maxLenList[index] < subItemLen) {
+ maxLenList[index] = subItemLen;
+ maxStrList[index] = subItem;
+ }
+ });
+ }
+ // 鎬诲
+ let sumWidth = 0;
+ // 璁＄畻瀹為檯鍒楀
+ let maxWidthList = maxStrList.map((item, index) => {
+ const width =
+ getTextWidth(item, {
+ size: '0.875rem',
+ }) + measureWidthOffset;
+ sumWidth += width;
+ return {
+ index,
+ maxWidth: width,
+ };
+ });
+ // 鎬诲灏忎簬瀹瑰櫒瀹藉害
+ if (sumWidth <= width) {
+ // 鎸夋瘮渚嬪垎閰嶅搴�
+ maxWidthList = maxWidthList.map((item) => ({
+ ...item,
+ width: (item.maxWidth / sumWidth) * width,
+ }));
+ // 鍏堟弧瓒冲皬鐨勶紝鍓╀綑绌洪棿鎸夋瘮渚嬪潎鍒�
+ } else {
+ // 褰撳墠宸叉弧瓒冲搴�
+ let curWidth = 0;
+ // 鎺掑ソ搴忕殑瀹藉害鍒楄〃
+ const sortedWidthList = _.sortBy(maxWidthList, 'maxWidth');
+ // 鍓╀綑瀹藉害
+ let restWidth = width;
+ let notFitStartIndex = 1;
+ for (let index = 0; index < sortedWidthList.length; index++) {
+ const item = sortedWidthList[index];
+ // 鍔犱笂褰撳墠瀹藉害
+ curWidth += item.maxWidth;
+ // 娌″崰婊″鍣紝鎴栨槸鏈�灏忕殑閭ｄ釜锛岀洿鎺ュ彇瀹冪殑鏈�澶у搴�
+ if (curWidth < width || index === 0) {
+ maxWidthList[item.index].width = item.maxWidth;
+ continue;
+ }
+ // 鍔犱笂褰撳墠瀹藉害瓒呭嚭褰撳墠瀹瑰櫒锛屽氨涓嶅姞锛岃绠椾笉鍔犳椂鐨勫墿浣欏搴�
+ restWidth = width - (curWidth - item.maxWidth);
+ // 褰撳姞涓� index 绱㈠紩澶勭殑瀹藉害鏃讹紝姝ｅソ瀹藉害瓒呭嚭瀹瑰櫒
+ notFitStartIndex = index;
+ break;
+ }
+ // 鍓╀綑瀹藉害
+ let sumRestMaxWidth = 0;
+ // 鍓╀綑鍔犱笂浼氳秴鍑哄鍣ㄥ搴︾殑绱㈠紩
+ const notFitIndexList = sortedWidthList.slice(notFitStartIndex).map((item) => {
+ sumRestMaxWidth += item.maxWidth;
+ return item.index;
+ });
+
+ // 鎸� maxWidth 姣斾緥鍒嗛厤鍓╀綑绌洪棿
+ for (const item of notFitIndexList) {
+ maxWidthList[item].width = restWidth * (maxWidthList[item].maxWidth / sumRestMaxWidth);
+ // if (maxWidthList[item].maxWidth <= restWidth) {
+ // maxWidthList[item].width = restWidth;
+ // }
+ }
+ }
+ colList.value = props.data.cols.map((item, index) => ({
+ ...item,
+ width: maxWidthList[index].width,
+ }));
+};
const resizeEvent = ({ width, height }) => {
if (width === 0 || height === 0) {
return;
}
+
if (props.data?.cols?.length > 0 && props.data?.values?.length > 0) {
- const maxStrList = props.data.cols.map((item) => item.title);
- const maxLenList = props.data.cols.map((item) => item.title.gblen());
- for (const item of props.data.values) {
- item.map((subItem, index) => {
- const subItemLen = subItem?.gblen();
- if (maxLenList[index] < subItemLen) {
- maxLenList[index] = subItemLen;
- maxStrList[index] = subItem;
- }
- });
- }
- // 鎬诲
- let sumWidth = 0;
- let maxWidthList = maxStrList.map((item, index) => {
- const width =
- getTextWidth(item, {
- size: '0.875rem',
- }) + measureWidthOffset;
- sumWidth += width;
- return {
- index,
- maxWidth: width,
- };
+ buildGroupData();
+ calcColWidth(width);
+ nextTick(() => {
+ calcPagerHeight();
});
- if (sumWidth <= width) {
- maxWidthList = maxWidthList.map((item) => ({
- ...item,
- width: (item.maxWidth / sumWidth) * width,
- }));
- // 鍏堟弧瓒冲皬鐨勶紝鍓╀綑绌洪棿鎸夋瘮渚嬪潎鍒�
- } else {
- let curWidth = 0;
- const sortedWidthList = _.sortBy(maxWidthList, 'maxWidth');
- let restWidth = width;
- let notFitStartIndex = 1;
- for (let index = 0; index < sortedWidthList.length; index++) {
- const item = sortedWidthList[index];
- curWidth += item.maxWidth;
- if (curWidth < width || index === 0) {
- maxWidthList[item.index].width = item.maxWidth;
- continue;
- }
- restWidth = width - (curWidth - item.maxWidth);
- notFitStartIndex = index;
- break;
- }
- let sumRestMaxWidth = 0;
- const notFitIndexList = sortedWidthList.slice(notFitStartIndex).map((item) => {
- sumRestMaxWidth += item.maxWidth;
- return item.index;
- });
-
- // 骞冲潎鍒嗛厤鍓╀綑绌洪棿
- for (const item of notFitIndexList) {
- maxWidthList[item].width = restWidth * (maxWidthList[item].maxWidth / sumRestMaxWidth);
- if (maxWidthList[item].maxWidth <= restWidth) {
- maxWidthList[item].width = restWidth;
- }
-
- // maxWidthList[item].width = undefined;
- }
- }
- colList.value = props.data.cols.map((item, index) => ({
- ...item,
- width: maxWidthList[index].width,
- }));
} else {
colList.value = [];
}
- tableRef.value.doLayout();
+
+ setTimeout(() => {
+ tableRef.value.doLayout();
+ }, 300);
};
const resizeHandler = debounce(resizeEvent);
+//#region ====================== 鏍峰紡 ======================
+const tableCellStyle = ({ row, rowIndex, column, columnIndex }): CSSProperties => {
+ const extraStyle = {
+ ...(columnIndex === 0 ? { borderLeft: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}` } : {}),
+ };
+ return {
+ textAlign: 'center',
+ borderColor: BORDER_COLOR,
+ borderWidth: `${THICK_BORDER_WIDTH}px`,
+ color: '#7331a5',
+ fontSize: '0.875rem',
+ ...extraStyle,
+ };
+};
+
+const tableHeaderCellStyle = ({ row, rowIndex, column, columnIndex }): CSSProperties => {
+ const extraStyle = {
+ ...(columnIndex === 0 ? { borderLeft: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}` } : {}),
+ ...(rowIndex === 0
+ ? { borderTop: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}`, backgroundColor: '#8db4e2', fontSize: '1rem' }
+ : {}),
+ };
+
+ return {
+ textAlign: 'center',
+ borderColor: BORDER_COLOR,
+ borderWidth: `${THICK_BORDER_WIDTH}px`,
+ backgroundColor: COL_HEADER_CELL_BG_COLOR,
+ fontWeight: 700,
+ fontSize: '0.875rem',
+ color: '#000',
+ ...extraStyle,
+ };
+}; //#endregion
+
+//#region ====================== 鍒嗛〉 ======================
+const pager = reactive({
+ index: 1,
+ size: 10,
+ total: props.data?.values?.length ?? 0,
+});
+
+const calcCellHeight = (count, cellHeight) => {
+ return count * cellHeight + count * THICK_BORDER_WIDTH;
+};
+
+/**
+ * 璁＄畻鍒嗛〉琛ㄦ牸瀹藉害
+ */
+const calcPagerHeight = () => {
+ // 琛ㄦ牸鍐呭鍗曞厓鏍奸珮搴�
+ const cellHeight = tableRef.value.$el.querySelector('.el-table__body .el-table__cell').clientHeight;
+ const headerHeight = tableRef.value.$el.querySelector('.el-table__header-wrapper').clientHeight;
+
+ // 闄愬埗楂樺害
+ const limitHeight = document.body.clientHeight * 0.7;
+
+ // 姹� size
+ // size*cellHeight + size*THICK_BORDER_WIDTH + headerHeight <= limitHeight;
+ // size <= (limitHeight - headerHeight)/(cellHeight+THICK_BORDER_WIDTH);
+
+ // 涓�椤垫湁 pager.size锛屾潯璁板綍
+ pager.size = Math.floor((limitHeight - headerHeight) / (cellHeight + THICK_BORDER_WIDTH));
+
+ const currentHeight = calcCellHeight(pager.size, cellHeight) + headerHeight;
+
+
+ tableHeight.value = currentHeight;
+
+ tableRef.value.doLayout();
+
+ pager.index = 1;
+ chunkTableData.value = _.chunk(props.data.values ?? [], pager.size);
+};
+
+const handleCurrentChange = (...a) => {};
+//#endregion
+
+const tableHeight = ref(0.7 * document.body.clientHeight);
onMounted(() => {
resizeEvent({
width: containerRef.value.clientWidth,
@@ -133,4 +318,8 @@
});
});
</script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+// :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell){
+// background-color: v-bind(stripedBgColor);
+// }
+</style>
--
Gitblit v1.9.3