选择宽度自适应

wujingjing

2024-07-26 bcff2cf9253145d0dd4b36daed70a12ecbd2ff54

 src/components/chat/chatComponents/summaryCom/components/deviceLastValue/DeviceLastValueCom.vue

@@ -8,6 +8,9 @@
               backgroundColor: BORDER_COLOR,
            }"
         >
            <div class="flex-center font-bold text-base bg-[#8db4e2]" :style="{ height: `${CELL_HEIGHT}px` }">
               {{ data.title }}
            </div>
            <div
               v-for="(rowChunk, index) in currentRowChunkList"
               :key="index"
@@ -80,7 +83,7 @@

<script setup lang="ts">
import _ from 'lodash';
import { computed, onMounted, ref } from 'vue';
import { computed, onActivated, onMounted, ref } from 'vue';
import MonitorContent from './MonitorContent.vue';
import { debounce, getTextWidth } from '/@/utils/util';

@@ -162,12 +165,15 @@
const restColWidth = ref(colHeaderCellContentWidth.value);
const calcMaxRowsNum = (groupCount: number, height, extraHeight = 0) => {
   return Math.floor(
      (height - THICK_BORDER_WIDTH - extraHeight) /
      (height - 2 * THICK_BORDER_WIDTH - CELL_HEIGHT - extraHeight) /
         (CELL_HEIGHT * groupCount + 2 * THICK_BORDER_WIDTH + THIN_BORDER_WIDTH * (groupCount - 2))
   );
};
let maxColsNum = ref<number>(null);
const resizeEvent = ({ width, height }) => {
   if (width === 0 || height === 0) {
      return;
   }
   // 按最大宽度算最大列数
   maxColsNum.value = Math.floor(
      (width - THICK_BORDER_WIDTH + colHeaderCellContentWidth.value - rowHeaderCellContentWidth.value) /
@@ -208,7 +214,11 @@
   const isNeedPage = maxColsRowsNum > rowsNum;
   rowsNum = isNeedPage ? calcMaxRowsNum(groupCount, height, PAGE_HEIGHT) : maxColsRowsNum;
   // rowsNum 行，maxColsNum列，第一列不算
   pageSize.value = isNeedPage ? rowsNum * (maxColsNum.value - 1) : total;
   pageSize.value = isNeedPage
      ? rowsNum * (maxColsNum.value - 1)
      : total % (maxColsNum.value - 1) === 0
      ? total
      : (Math.floor(total / (maxColsNum.value - 1)) + 1) * (maxColsNum.value - 1);
   pageIndex.value = 1;
   // isNeedPage 是否分页，rowsNum 行数，maxColsNum 列数，
};
@@ -258,7 +268,7 @@
// const groupCount = (TEST_DATA?.rows?.length ?? 0) + 1;
// 计算最大行数
// y * (cellHeight * groupCount) +
//    (y - 1) * (2 * thickBorderWidth) +
//    (y - 1) * (2 * thickBorderWidth) +cellHeight+thickBorderWidth
//    thickBorderWidth +
//    thickBorderWidth * 2 +
//    y * (groupCount - 2) * thinBorderWidth <=