表格优化提交

io.sc.platform.core.frontend/src/platform/components/grid/TreeGridRow.vue

@@ -44,18 +44,20 @@
       </div>
     </q-td>
     <template v-for="(col, index) in cols" :key="col.name">
-      <q-td v-if="index > 0" :title="col.classes?.indexOf('truncate') > -1 && col.value && typeof col.value !== 'object' ? col.value : ''">
+      <q-td
-        <div :class="col.__thClass">
+        v-if="index > 0"
-          <template v-if="col.value && typeof col.value === 'object' && col.value.componentType && col.value.bindModelValue">
+        :class="col.__thClass + ' ' + col.classes"
-            <component :is="col.value.componentType" v-bind="col.value.attrs" v-model="getRow(table.rows, row[props.rowKey], false)[col.name]"></component>
+        :title="col.classes?.indexOf('truncate') > -1 && col.value && typeof col.value !== 'object' ? col.value : ''"
-          </template>
+      >
-          <template v-else-if="col.value && typeof col.value === 'object' && col.value.componentType">
+        <template v-if="col.value && typeof col.value === 'object' && col.value.componentType && col.value.bindModelValue">
-            <component :is="col.value.componentType" v-bind="col.value.attrs"></component>
+          <component :is="col.value.componentType" v-bind="col.value.attrs" v-model="getRow(table.rows, row[props.rowKey], false)[col.name]"></component>
-          </template>
+        </template>
-          <template v-else>
+        <template v-else-if="col.value && typeof col.value === 'object' && col.value.componentType">
-            <span v-dompurify-html="col.value || ''"></span>
+          <component :is="col.value.componentType" v-bind="col.value.attrs"></component>
-          </template>
+        </template>
-        </div>
+        <template v-else>
+          <span v-dompurify-html="col.value || ''"></span>
+        </template>
       </q-td>
     </template>
   </q-tr>

io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue

@@ -1,5 +1,6 @@
 <template>
   <div style="height: 100%">
+    <q-resize-observer debounce="500" @resize="onResize" />
     <q-table
       ref="tableRef"
       v-model:pagination="state.pagination"
@@ -16,14 +17,14 @@
       :rows-per-page-options="pageable && !tree && state.refHeightWidth.middleWidth > 600 ? state.pagination.rowsPerPageOptions : []"
       :loading="state.loading"
       :class="tableClassComputed"
-      :table-style="tableHeightComputed()"
+      :table-style="tableHeightComputed"
       :row-key="rowKey_"
       :visible-columns="visibleColumnsComputed"
       @request="onRequest"
       @fullscreen="tableFullscreenFun"
     >
       <template #top="scope">
-        <q-resize-observer @resize="onResize" />
+        <q-resize-observer debounce="100" @resize="onResize" />
         <div class="col">
           <w-form ref="queryFormRef" v-bind="props.queryFormAttrs" :fields="table.queryFormFields" :cols-num="queryFormColsNum"></w-form>
           <div
@@ -71,7 +72,7 @@
               {{ c.label }}
             </q-th>
           </q-tr>
-          <q-tr v-if="table.rows.length === 0" :style="noDataTrHeightComputed()" class="noDataTr">
+          <q-tr v-if="table.rows.length === 0" :style="noDataTrHeightComputed" class="noDataTr">
             <q-td :colspan="noDataTrColspanComputed" align="center" valian="middle"><q-icon size="2em" :name="IconEnum.提示" />{{ state.noDataLabel }}</q-td>
           </q-tr>
         </template>
@@ -96,7 +97,7 @@
               </q-th>
             </template>
           </q-tr>
-          <q-tr v-if="table.rows.length === 0" :style="noDataTrHeightComputed()" class="noDataTr">
+          <q-tr v-if="table.rows.length === 0" :style="noDataTrHeightComputed" class="noDataTr">
             <q-td :colspan="noDataTrColspanComputed" align="center" valian="middle"><q-icon size="2em" :name="IconEnum.提示" />{{ state.noDataLabel }}</q-td>
           </q-tr>
         </template>
@@ -251,6 +252,7 @@ const darkBgColor = getCssVar('dark');
 const tableHeadBgColor = gc.theme.dark ? darkBgColor : gc.theme?.grid?.headBgColor || '#f5f7fa';
 const tableBorderColor = gc.theme?.grid?.borderColor || 'rgba(0, 0, 0, 0.12)';
 const stickyBgColor = gc.theme.dark ? darkBgColor : gc.theme?.grid?.stickyBgColor || '#ffffff';
+const onResizeRef = ref(false);
 
 const props = defineProps({
   height: { type: Number, default: 0 }, // 表格高度
@@ -1148,7 +1150,8 @@ const selectionComputed = computed(() => {
   }
 });
 
-const tableHeightComputed = () => {
+const tableHeightComputed = computed(() => {
+  onResizeRef.value;
   let availableHeight = 0;
   const parentHtmlElement = tableRef?.value?.$el?.parentElement;
   if (parentHtmlElement) {
@@ -1163,9 +1166,10 @@ const tableHeightComputed = () => {
     height: props.height > 0 ? props.height + 'px' : availableHeight > 0 ? availableHeight + 'px' : '0px',
   };
   return style;
-};
+});
 
-const noDataTrHeightComputed = () => {
+const noDataTrHeightComputed = computed(() => {
+  onResizeRef.value;
   let availableHeight = 0;
   let otherHeight = 0;
   let otherHeight2 = 0;
@@ -1186,10 +1190,10 @@ const noDataTrHeightComputed = () => {
   availableHeight -= 1; //无数据增加的title行，下边框所占边框
 
   const style = {
-    height: props.height > 0 ? props.height - otherHeight2 + 'px' : availableHeight > 0 ? availableHeight + 'px' : '0px',
+    height: props.height > 0 ? props.height - otherHeight2 - 1 + 'px' : availableHeight > 0 ? availableHeight + 'px' : '0px',
   };
   return style;
-};
+});
 
 const noDataTrColspanComputed = computed(() => {
   let colspan = excludeColumnNum.value;
@@ -1242,6 +1246,7 @@ const updateTicked = (evt: Event, row: any) => {
 };
 
 const onResize = () => {
+  onResizeRef.value = !onResizeRef.value;
   handlerQueryFormShowField();
   if (tableRef.value) {
     state.refHeightWidth.yLocation = tableRef.value.$el.getBoundingClientRect().y;
@@ -1397,6 +1402,7 @@ const onRequest = async (ops: any) => {
   addRowKey(table.rows);
   stickyHeaderColumn();
   emit('afterRequestData');
+  table.treeExpand = false;
 };
 
 const addRowKey = (rows: []) => {
@@ -1756,6 +1762,7 @@ const stickyHeaderColumn = (time = 500) => {
     }
   }, time);
 
+  tableRef.value.$el.getElementsByTagName('table')[0].style.setProperty('table-layout', 'fixed');
   tableRef.value.$el.getElementsByTagName('table')[0].style.setProperty('--tableHeadBgColor', tableHeadBgColor);
   tableRef.value.$el.getElementsByTagName('table')[0].style.setProperty('--stickyBgColor', stickyBgColor);
   tableRef.value.$el.getElementsByTagName('table')[0].style.setProperty('--tableBorderColor', tableBorderColor);