列表展示指定列

wujingjing

2024-10-12 5d4d17fade3bdec025281f7bf94f706491b4d339

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

@@ -2,48 +2,58 @@
<template>
   <div>
      <!-- <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"
            :maxHeight="tableHeight"
            :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"
         >
            <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
                     v-for="(item, index) in colList"
                     :label="item.title"
                     :width="item.width"
                     :sortable="item.type === 'time'"
                     :key="index"
                     :prop="index + ''"
                     show-overflow-tooltip
                  />
      <div class="w-full flex-column">
         <div class="flex-0 flex">
            <ColFilter class="ml-auto" :columnList="colList"  @change="colFilterChange" />
         </div>
         <div class="flex-auto" ref="containerRef" v-resize="resizeHandler">
            <el-table
               ref="tableRef"
               :maxHeight="tableHeight"
               :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"
            >
               <DefineColumns v-slot="{ cols }">
                  <template v-for="item in colList" :key="item.prop">
                     <el-table-column
                        v-if="item.isShow ?? true"
                        :label="item.label"
                        :width="item.width"
                        :sortable="item.sortable"
                        :key="item.prop"
                        :prop="item.prop"
                        show-overflow-tooltip
                     />
                  </template>
               </DefineColumns>
               <el-table-column v-if="data?.title" :label="data?.title" show-overflow-tooltip>
                  <template v-if="data?.cols?.length > 0">
                     <template v-for="item in colList" :key="item.prop">
                        <el-table-column
                           v-if="item.isShow ?? true"
                           :label="item.label"
                           :width="item.width"
                           :sortable="item.sortable"
                           :key="item.prop"
                           :prop="item.prop"
                           show-overflow-tooltip
                        />
                     </template>
                  </template>
               </el-table-column>
               <template v-else>
                  <template v-if="data?.cols?.length > 0">
                     <ReuseColumns :cols="colList" />
                  </template>
               </template>
            </el-table-column>
            <template v-else>
               <template v-if="data?.cols?.length > 0">
                  <ReuseColumns :cols="colList" />
               </template>
            </template>
         </el-table>
            </el-table>
         </div>

         <el-pagination
            style="margin-bottom: 0 !important; margin-left: auto !important; float: none !important"
            small
@@ -62,8 +72,10 @@
import type { TableInstance } from 'element-plus';
import _ from 'lodash';
import type { CSSProperties } from 'vue';
import { nextTick, onMounted, reactive, ref, type PropType } from 'vue';
import { computed, nextTick, onMounted, reactive, ref, type PropType } from 'vue';
import { BORDER_COLOR, COL_HEADER_CELL_BG_COLOR, THICK_BORDER_WIDTH } from '../deviceLastValue/constants';
import ColFilter from '/@/components/table/colFilter/ColFilter.vue';
import { TableCol } from '/@/components/table/colFilter/types';
import { debounce, getTextWidth } from '/@/utils/util';
const props = defineProps({
   data: {
@@ -74,7 +86,26 @@
const [DefineColumns, ReuseColumns] = createReusableTemplate<{
   cols: any[];
}>();
const colList = ref([]);
const colList = ref<TableCol[]>(
   props.data.cols.map((item, index) => {
      let isShow = true;
      if(props.data.max_cols !=null){
         isShow = index < props.data.max_cols;
      }
      return {
      ...item,
      width: 0,
      label: item.title,
      sortable: item.type === 'time',
      prop: index + '',
      isShow:isShow
		
   } as TableCol;
   })
);
// 所有显示的 prop
const visibleColProp = computed(() => colList.value.filter((item) => item.isShow == null || item.isShow).map((item) => item.prop));

const containerRef = ref<HTMLDivElement>(null);
const tableRef = ref<TableInstance>(null);
const measureWidthOffset = 28;
@@ -145,8 +176,23 @@
 * @param width
 */
const calcColWidth = (width) => {
   const maxStrList = props.data.cols.map((item) => item.title);
   const maxLenList = props.data.cols.map((item) => item.title.gblen());
   // 返回所有标题字符串
   const maxStrList = props.data.cols.map((item, index) => {
      if (visibleColProp.value.includes(index + '')) {
         return item.title;
      } else {
         return '';
      }
   });
   // 返回所有标题字符串长度
   const maxLenList = props.data.cols.map((item, index) => {
      if (visibleColProp.value.includes(index + '')) {
         return item.title.gblen();
      } else {
         return 0;
      }
   });
   // 计算每一列最长的标题字符串和标题字符串长度
   for (const item of props.data.values) {
      item.map((subItem, index) => {
         const subItemLen = subItem?.gblen();
@@ -158,12 +204,14 @@
   }
   // 总宽
   let sumWidth = 0;
   // 计算实际列宽
   // 计算所有列实际列宽
   let maxWidthList = maxStrList.map((item, index) => {
      const width =
         getTextWidth(item, {
            size: '0.875rem',
         }) + measureWidthOffset;
      // 不可见列宽度为 0
      const width = !visibleColProp.value.includes(index + '')
         ? 0
         : getTextWidth(item, {
               size: '0.875rem',
           }) + measureWidthOffset;
      sumWidth += width;
      return {
         index,
@@ -191,7 +239,7 @@
         // 加上当前宽度
         curWidth += item.maxWidth;
         // 没占满容器，或是最小的那个，直接取它的最大宽度
         if (curWidth < width || index === 0) {
         if (curWidth <= width || index === 0) {
            maxWidthList[item.index].width = item.maxWidth;
            continue;
         }
@@ -217,10 +265,9 @@
         // }
      }
   }
   colList.value = props.data.cols.map((item, index) => ({
      ...item,
      width: maxWidthList[index].width,
   }));
   colList.value.map((item, index) => {
      item.width = maxWidthList[index].width;
   });
};
const resizeEvent = ({ width, height }) => {
   if (width === 0 || height === 0) {
@@ -233,8 +280,6 @@
      nextTick(() => {
         calcPagerHeight();
      });
   } else {
      colList.value = [];
   }

   setTimeout(() => {
@@ -320,6 +365,12 @@

//#endregion

const colFilterChange = () => {
   // 重新计算宽度
   resizeEvent({ width: containerRef.value.clientWidth, height: containerRef.value.clientHeight });

};

const tableHeight = ref(0.7 * document.body.clientHeight);
onMounted(() => {
   resizeEvent({