table Height

wujingjing

2024-09-30 5e78e5bc69a8b7abf76663acaab6b7da63f35aa2

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue

@@ -2,19 +2,30 @@
<template>
   <div>
      <!-- <span v-if="data?.title" class="text-base font-bold flex-center mb-5">{{ data?.title }}</span> -->
      <div class="w-full" ref="containerRef" v-resize="resizeHandler">
      <div class="w-full flex-column" ref="containerRef" v-resize="resizeHandler">
         <el-table
            ref="tableRef"
            maxHeight="70vh"
            :height="tableHeight"
            border
            :cell-style="tableCellStyle"
            :header-cell-style="tableHeaderCellStyle"
            :data="data?.values"
            :data="chunkTableData[pager.index - 1]"
            :spanMethod="objectSpanMethod"
            class="w-full h-full"
            cellClassName="text-sm"
            headerCellClassName="text-sm"
         >
            <DefineColumns v-slot="{ cols }">
               <el-table-column
                  v-for="(item, index) in cols"
                  :label="item.title"
                  :width="item.width"
                  :sortable="item.type === 'time'"
                  :key="index"
                  :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
@@ -30,26 +41,29 @@
            </el-table-column>
            <template v-else>
               <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
                  />
                  <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 { CSSProperties, 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({
@@ -57,6 +71,11 @@
      type: Object as PropType<any>,
   },
});

const [DefineColumns, ReuseColumns] = createReusableTemplate<{
   cols: any[];
}>();
// props.data.title = '哈哈哈哈哈';

const colList = ref([]);
const containerRef = ref<HTMLDivElement>(null);
@@ -69,6 +88,8 @@
   }
});

const chunkTableData = ref([props.data?.values]);

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
   if (groupColIndex.includes(columnIndex)) {
      return {
@@ -77,12 +98,11 @@
      };
   }
};
const resizeEvent = ({ width, height }) => {
   if (width === 0 || height === 0) {
      return;
   }

   if (props.data?.cols?.length > 0 && props.data?.values?.length > 0) {
/**
 * 构建分组结构
 */
const buildGroupData = () => {
      const groupData = _.groupBy(props.data.values, (item, index) => {
         // 找出所有需要 group 的值，加起来
         const groupKey = item.reduce((preVal, curVal, index) => {
@@ -103,7 +123,16 @@
         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) {
@@ -117,6 +146,7 @@
      }
      // 总宽
      let sumWidth = 0;
   // 计算实际列宽
      let maxWidthList = maxStrList.map((item, index) => {
         const width =
            getTextWidth(item, {
@@ -128,52 +158,76 @@
            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;
            }

            // maxWidthList[item].width = undefined;
         // 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) {
      buildGroupData();
      calcColWidth(width);
      nextTick(() => {
         calcPagerHeight();
      });
   } else {
      colList.value = [];
   }

   setTimeout(() => {
   tableRef.value.doLayout();
   }, 300);
};

const resizeHandler = debounce(resizeEvent);
@@ -196,7 +250,9 @@
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'} : {}),
      ...(rowIndex === 0
         ? { borderTop: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}`, backgroundColor: '#8db4e2', fontSize: '1rem' }
         : {}),
   };

   return {
@@ -211,6 +267,50 @@
   };
}; //#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,