表格优化提交

io.sc.platform.core.frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "platform-core",
-  "version": "8.1.145",
+  "version": "8.1.146",
   "description": "前端核心包,用于快速构建前端的脚手架",
   "//main": "库的主文件",
   "main": "dist/platform-core.js",

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

@@ -6,6 +6,7 @@
       flat
       binary-state-sort
       :no-data-label="state.noDataLabel"
+      :hide-no-data="true"
       :loading-label="state.loadingLabel"
       v-bind="attrs"
       :selection="selectionComputed"
@@ -70,6 +71,9 @@
               {{ c.label }}
             </q-th>
           </q-tr>
+          <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>
         <template v-else>
           <q-tr :props="scope">
@@ -92,6 +96,9 @@
               </q-th>
             </template>
           </q-tr>
+          <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>
       </template>
       <template #body="scope">
@@ -158,6 +165,11 @@
           </template>
         </q-tr>
       </template>
+      <!-- <template v-if="table.rows.length === 0" #top-row>
+        <q-tr>
+          <q-td >{{ state.noDataLabel }}</q-td>
+        </q-tr>
+      </template> -->
       <template #loading>
         <q-inner-loading :showing="state.loading" style="z-index: 999">
           <q-spinner-gears size="50px" color="primary" />
@@ -197,6 +209,7 @@
         </template>
         <template v-else> 共 {{ state.pagination.rowsNumber }} 条记录 </template>
       </template>
+      <!--       
       <template v-if="!attrs['hide-bottom']" #no-data="{ message }">
         <div class="full-width row flex-center text-dark q-gutter-sm" :style="`height:` + noDataBottomHeightComputed">
           <q-icon size="2em" :name="IconEnum.提示" />
@@ -204,7 +217,7 @@
             {{ message }}
           </span>
         </div>
-      </template>
+      </template> -->
     </q-table>
     <w-dialog ref="dialogRef" v-bind="editor.dialog" :title="dialog.dialogTitle" :buttons="dialog.dialogButtons">
       <w-form ref="dialogFormRef" v-bind="editor.form" class="pt-1.5 px-1.5"></w-form>
@@ -892,6 +905,7 @@ const state = reactive({
   // 表格响应式高宽
   refHeightWidth: {
     yLocation: 0, // 表格当前所在Y轴位置
+    noDataTrYLocation: 0, // 无数据提示行所在Y轴位置
     topHeight: 0, // 表格当前top区域高度（表格列头上方区域）
     bottomHeight: 0, // 表格当前bottom区域高度（无可用数据、分页那块区域）
     middleWidth: 0, // 表格当前middle区域宽度（表格列头及数据行区域）
@@ -1145,53 +1159,61 @@ const tableHeightComputed = computed(() => {
     mainPaddingBottom -
     mainContainerPaddingBottom -
     otherHeight;
-  if ((table.rows && table.rows.length > 0) || attrs['hide-bottom']) {
   return {
     height: props.height > 0 ? props.height + 'px' : resultHeight + 'px',
   };
-  } else {
+  // if ((table.rows && table.rows.length > 0) || attrs['hide-bottom']) {
-    return {
+
-      height: state.refHeightWidth.middleHeight + 'px',
+  // } else {
-    };
+  //   return {
-  }
+  //     height: state.refHeightWidth.middleHeight + 'px',
+  //   };
+  // }
 });
 
-const noDataBottomHeightComputed = computed(() => {
+const noDataTrHeightComputed = computed(() => {
   // 浏览器可视区域高度
   const screenHeight = $q.screen.height;
   // 系统底部高度（一般用来显示XX版权所有那一层）
   const footerHeight = gc.theme.footer.show ? gc.theme.footer.height : 0;
-  // 其他高度，边框，用户自定义留白等，默认 4px
-  const otherHeight = table.spaceHeight || 4;
   // 主面板下边距
   const mainPaddingBottom = gc.theme.main.paddingBottom || 0;
   // 主面板容器下边距
   const mainContainerPaddingBottom = gc.theme.main.containerPaddingBottom || 0;
+  // 其他高度，边框，用户自定义留白等，默认 4px
+  const otherHeight = table.spaceHeight || 4;
   const resultHeight =
     screenHeight -
-    state.refHeightWidth.yLocation -
+    state.refHeightWidth.noDataTrYLocation -
-    state.refHeightWidth.topHeight -
+    (state.refHeightWidth.bottomHeight || 0) -
-    state.refHeightWidth.middleHeight -
+    footerHeight -
     mainPaddingBottom -
     mainContainerPaddingBottom -
-    footerHeight -
+    (state.refHeightWidth.middleScrollWidth - state.refHeightWidth.middleWidth > 0 ? 15 : 0) -
     otherHeight;
-  if (table.rows && table.rows.length > 0) {
+  return {
-    return '0px';
+    height: props.height > 0 ? props.height + 'px' : resultHeight + 'px',
-  } else {
+  };
-    return table.inFullscreen ? resultHeight + 'px' : props.height > 0 ? props.height + 'px' : resultHeight + 'px';
+});
-  }
+const noDataTrColspanComputed = computed(() => {
+  let colspan = excludeColumnNum.value;
+  colspan += visibleColumnsComputed.value.length;
+  return colspan;
 });
 
 // 表格进入全屏模式时所在Y轴会变成0，退出时也无法准确获得，最终导致出现滚动条，需要在进入全屏时记录Y轴位置。
 let tableY = 0;
+let noDataTrY = 0;
 const tableFullscreenFun = (value) => {
   table.inFullscreen = !table.inFullscreen;
   if (value) {
     tableY = state.refHeightWidth.yLocation;
+    noDataTrY = state.refHeightWidth.noDataTrYLocation;
   } else {
     state.refHeightWidth.yLocation = tableY;
+    state.refHeightWidth.noDataTrYLocation = noDataTrY;
     tableY = 0;
+    noDataTrY = 0;
   }
 };
 
@@ -1227,6 +1249,9 @@ const onResize = () => {
   handlerQueryFormShowField();
   if (tableRef.value) {
     state.refHeightWidth.yLocation = tableRef.value.$el.getBoundingClientRect().y;
+    if (tableRef.value.$el.getElementsByClassName('noDataTr').length > 0) {
+      state.refHeightWidth.noDataTrYLocation = tableRef.value.$el.getElementsByClassName('noDataTr')[0].getBoundingClientRect().y;
+    }
     state.refHeightWidth.topHeight = tableRef.value.$el.getElementsByClassName('q-table__top')[0]?.clientHeight;
     state.refHeightWidth.middleWidth = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.clientWidth;
     state.refHeightWidth.middleScrollWidth = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.scrollWidth;
@@ -1614,6 +1639,9 @@ const stickyHeaderColumn = (time = 500) => {
     // 延迟处理锁定列及表格宽高的获取
     if (tableRef.value) {
       state.refHeightWidth.yLocation = tableRef.value.$el.getBoundingClientRect()?.y;
+      if (tableRef.value.$el.getElementsByClassName('noDataTr').length > 0) {
+        state.refHeightWidth.noDataTrYLocation = tableRef.value.$el.getElementsByClassName('noDataTr')[0].getBoundingClientRect().y;
+      }
       state.refHeightWidth.topHeight = tableRef.value.$el.getElementsByClassName('q-table__top')[0]?.clientHeight;
       state.refHeightWidth.bottomHeight = tableRef.value.$el.getElementsByClassName('q-table__bottom')[0]?.clientHeight;
       state.refHeightWidth.middleWidth = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.clientWidth;
@@ -1674,9 +1702,14 @@ const stickyHeaderColumn = (time = 500) => {
           column1Width + column2Width + column3Width + column4Width + column5Width + column6Width + column7Width + column8Width + column9Width + 'px',
         );
       }
-      const titleTotalHeight = tableDom.getElementsByTagName('thead')[0].offsetHeight;
+      let titleTotalHeight = tableDom.getElementsByTagName('thead')[0].offsetHeight;
+      // 无数据时列头会增加一行，多表头的top距离计算会出错，需减掉多出来的提示行。
+      if (table.rows.length === 0) {
+        const noDataTrHeight = tableRef.value.$el.getElementsByClassName('noDataTr')[0].offsetHeight;
+        titleTotalHeight = titleTotalHeight - noDataTrHeight;
+      }
       const titleRowHeight = titleTotalHeight / columnTitleState.columnTitleRowNum;
-      if (columnTitleState.columnTitleRowNum > 1) {
+      if (columnTitleState.columnTitleRowNum) {
         const row1Height = titleRowHeight * 1;
         const row2Height = titleRowHeight * 2;
         const row3Height = titleRowHeight * 3;
@@ -1717,7 +1750,10 @@ const stickyHeaderColumn = (time = 500) => {
   if (denseBottomComputed.value && (!attrs.hasOwnProperty('hide-bottom') || attrs['hide-bottom'] === false)) {
     tableRef.value.$el.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomHeight', 33 + 'px');
     tableRef.value.$el.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomButtonHeight', 24 + 'px');
-  } else if (!attrs.hasOwnProperty('hide-bottom') || attrs['hide-bottom'] === false) {
+  } else if (
+    (!attrs.hasOwnProperty('hide-bottom') || attrs['hide-bottom'] === false) &&
+    tableRef.value.$el.getElementsByClassName('q-table__bottom').length > 0
+  ) {
     tableRef.value.$el.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomHeight', 50 + 'px');
     tableRef.value.$el.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomButtonHeight', 40 + 'px');
   }