bugfix(table): table问题合集 #2091 (#2096)

* bugfix: 修复column filter默认值回填问题 # Reviewed, transaction id: 15238 * feat(table): 支持跨页全选设置 # Reviewed, transaction id: 15598 * fix(virtual-render): 修复lineHeight fn计算最后一行位置问题 # Reviewed, transaction id: 15633 * Merge branch 'staging' of https://github.com/TencentBlueKing/bkui-vue3 into staging , # Reviewed, transaction id: 15635 * fix(virtual-render): 计算最后一行行数问题 # Reviewed, transaction id: 15648 * fix(table): 拖拽完毕抛出事件参数问题修复 # Reviewed, transaction id: 15702 * fix(table): 拖拽完毕抛出事件参数问题修复 # Reviewed, transaction id: 15703 * fix(table): 拖拽完毕抛出事件参数问题修复 # Reviewed, transaction id: 15705 * Merge branch 'staging' of https://github.com/TencentBlueKing/bkui-vue3 into staging , # Reviewed, transaction id: 15706 * bugfix(table): 过滤条件&样式修复 * bugfix(table): 修复已知问题 & 调整虚拟渲染逻辑 * bugfix(table): 修复已知问题 & 调整虚拟渲染逻辑 # Reviewed, transaction id: 16080 * bufix(table): scrollTo定位问题修复 # Reviewed, transaction id: 16154 * Merge branch 'staging' of https://github.com/TencentBlueKing/bkui-vue3 into beta-2.2.3 # Reviewed, transaction id: 16780
TencentBlueKing · Aug 29, 2024 · 0aaf194 · 0aaf194
1 parent 9766d66
commit 0aaf194
Show file tree

Hide file tree

Showing 13 changed files with 619 additions and 369 deletions.
diff --git a/packages/scrollbar/src/index.ts b/packages/scrollbar/src/index.ts
@@ -419,8 +419,14 @@ export default class BkScrollbar {
   }
 
   scrollTo({ x, y }) {
-    this.element.scrollTop = y;
-    (this.element as HTMLElement).scrollLeft = x;
+    if (y !== undefined && typeof y === 'number') {
+      this.element.scrollTop = y;
+    }
+
+    if (x !== undefined && typeof x === 'number') {
+      (this.element as HTMLElement).scrollLeft = x;
+    }
+
     updateGeometry(this);
   }
 

diff --git a/packages/table/src/components/table-column.tsx b/packages/table/src/components/table-column.tsx
@@ -23,10 +23,9 @@
  * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  * IN THE SOFTWARE.
  */
-import { defineComponent, ExtractPropTypes, inject, onUnmounted, watch, toRaw } from 'vue';
+import { defineComponent, ExtractPropTypes, inject, onUnmounted, watch, toRaw, h } from 'vue';
 
 import { PropTypes } from '@bkui-vue/shared';
-import { isEqual } from 'lodash';
 
 import { COL_MIN_WIDTH, PROVIDE_KEY_INIT_COL } from '../const';
 import {
@@ -42,6 +41,7 @@ import {
   StringNumberType,
   TableAlign,
 } from '../props';
+import { isEqual } from 'lodash';
 
 const TableColumnProp = {
   label: LabelFunctionStringType,
@@ -73,10 +73,26 @@ export default defineComponent({
     const initTableColumns = inject(PROVIDE_KEY_INIT_COL, () => {});
     const lastPropsVal = {};
 
+    const isPropsEqual = (sorce: Record<string, unknown>, target: Record<string, unknown>) => {
+      const rawProps = toRaw(target);
+      const keys = Object.keys(rawProps);
+      return keys.every(key => {
+        if (typeof rawProps[key] === 'function') {
+          return sorce[key] !== undefined;
+        }
+
+        if (key === 'children') {
+          return true;
+        }
+
+        return isEqual(sorce[key], target[key]);
+      });
+    };
+
     watch(
       () => [props],
       () => {
-        if (!isEqual(lastPropsVal, toRaw(props))) {
+        if (!isPropsEqual(lastPropsVal, props)) {
           initTableColumns();
           Object.assign(lastPropsVal, toRaw(props));
         }
@@ -87,7 +103,21 @@ export default defineComponent({
     onUnmounted(() => {
       initTableColumns();
     });
+  },
+
+  render() {
+    try {
+      const renderDefault = this.$slots.default?.({
+        row: {},
+        column: {},
+        $index: -1,
+      });
+      const children = [renderDefault];
 
-    return () => {};
+      const vnode = h('div', children);
+      return vnode;
+    } catch {
+      return h('div', []);
+    }
   },
 });
diff --git a/packages/table/src/hooks/use-layout.tsx b/packages/table/src/hooks/use-layout.tsx
@@ -213,8 +213,17 @@ export default (props: TablePropTypes, ctx) => {
     return null;
   });
 
-  const setBodyHeight = (height: number) => {
-    bodyHeight.value = height - headHeight.value - fixedBottomHeight.value - footHeight.value;
+  const getBodyHeight = (height) => {
+    return height - headHeight.value - fixedBottomHeight.value - footHeight.value;
+  }
+
+  const setBodyHeight = (height: number, withHeadFoot = true) => {
+    if (withHeadFoot) {
+      bodyHeight.value = getBodyHeight(height);
+      return;
+    }
+
+    bodyHeight.value = height;
   };
 
   const setVirtualBodyHeight = (height: number) => {
@@ -376,6 +385,7 @@ export default (props: TablePropTypes, ctx) => {
     renderBody,
     renderFooter,
     renderFixedBottom,
+    getBodyHeight,
     setBodyHeight,
     setVirtualBodyHeight,
     setFootHeight,

diff --git a/packages/table/src/hooks/use-rows.tsx b/packages/table/src/hooks/use-rows.tsx
@@ -238,7 +238,7 @@ const useRows = (props: TablePropTypes) => {
     tableRowList.value.forEach(row => setRowAttribute(row, TABLE_ROW_ATTRIBUTE.ROW_HEIGHT, height));
   };
 
-  const getRowHeight = (row?, index?, type?) => {
+  const getRowHeight = (row?, index?, type?): number => {
     if (row) {
       return getRowAttribute(row, TABLE_ROW_ATTRIBUTE.ROW_HEIGHT);
     }
@@ -355,6 +355,12 @@ const useRows = (props: TablePropTypes) => {
     formatDataSchema();
   };
 
+  const getCurrentPageRowsHeight = () => {
+    return pageRowList.reduce((out, row) => {
+      return out + getRowHeight(row);
+    }, 0);
+  };
+
   return {
     setRowIndex,
     setRowExpand,
@@ -373,6 +379,7 @@ const useRows = (props: TablePropTypes) => {
     getRowSelection,
     getRowIndeterminate,
     getRowCheckedAllValue,
+    getCurrentPageRowsHeight,
     changePageRowIndex,
     toggleAllSelection,
     getRowHeight,

diff --git a/packages/table/src/plugins/head-filter.tsx b/packages/table/src/plugins/head-filter.tsx
@@ -60,16 +60,17 @@ export default defineComponent({
 
     const state = reactive({
       isOpen: false,
-      checked: checked.value,
+      checked: [],
     });
 
+    state.checked.push(...checked.value);
+
     watch(
       () => checked,
       () => {
         state.checked.length = 0;
         state.checked = [];
         state.checked.push(...checked.value);
-        // handleBtnSaveClick();
       },
       { deep: true },
     );

diff --git a/packages/table/src/table.less b/packages/table/src/table.less
@@ -312,6 +312,14 @@
 
       tbody {
         tr {
+
+          &.stripe-row {
+            background: #fafbfd;
+            td {
+              background-color: #fafbfd;
+            }
+          }
+
           td {
             background-color: #fff;
             border-top: 1px solid @table-bg-color;
@@ -598,10 +606,6 @@
       margin-left: auto;
     }
   }
-
-  .stripe-row {
-    background: #fafbfd;
-  }
 }
 
 .@{bk-prefix}-across-page-popover {

diff --git a/packages/table/src/table.tsx b/packages/table/src/table.tsx
@@ -64,6 +64,7 @@ export default defineComponent({
       setOffsetRight,
       setHeaderRowCount,
       setLineHeight,
+      getBodyHeight,
       refBody,
       refRoot,
     } = useLayout(props, ctx);
@@ -192,6 +193,8 @@ export default defineComponent({
       }
     };
 
+    const scrollTo00 = ref(false);
+
     const setTableData = debounce((resetScroll = true) => {
       const filterOrderList = getFilterAndSortList();
       if (!props.remotePagination) {
@@ -200,12 +203,17 @@ export default defineComponent({
 
       const renderList = getRenderRowList(filterOrderList);
       rows.setPageRowList(renderList);
+      if (resetScroll) {
+        scrollTo00.value = true;
+      }
 
       nextTick(() => {
         setOffsetRight();
+        setRowsBodyHeight();
 
-        if (resetScroll) {
+        if (scrollTo00.value) {
           scrollTo(0, 0);
+          scrollTo00.value = false;
         }
       });
     }, 64);
@@ -240,6 +248,21 @@ export default defineComponent({
       });
     });
 
+    const setRowsBodyHeight = () => {
+      if (props.height === '100%' || props.height === 'auto') {
+        const rowsHeight = rows.getCurrentPageRowsHeight();
+        let bodyHeight = rowsHeight;
+        if (/^\d+\.?\d*(px)?$/.test(`${props.maxHeight}`)) {
+          const maxHeight = getBodyHeight(Number(`${props.maxHeight}`.replace('px', '')));
+          if (bodyHeight > maxHeight) {
+            setBodyHeight(maxHeight, false);
+            return;
+          }
+        }
+        setBodyHeight(bodyHeight, false);
+      }
+    };
+
     watch(
       () => [props.columns],
       () => {
@@ -266,13 +289,21 @@ export default defineComponent({
     );
 
     watch(
-      () => [columns.sortColumns, columns.filterColumns],
+      () => [columns.filterColumns],
       () => {
         setTableData();
       },
       { deep: true },
     );
 
+    watch(
+      () => [columns.sortColumns],
+      () => {
+        setTableData(false);
+      },
+      { deep: true },
+    );
+
     watch(
       () => [pagination.isShowPagination.value],
       () => {
@@ -293,11 +324,22 @@ export default defineComponent({
     watch(
       () => [pagination.options.count, pagination.options.limit, pagination.options.current],
       () => {
-        setTableData();
+        setTableData(false);
       },
       { immediate: true },
     );
 
+    const pageListLength = computed(() => rows.pageRowList.length);
+
+    watch(pageListLength,
+      (val, old) => {
+        if (val < old) {
+          refBody?.value?.updateScroll?.();
+          scrollTo(undefined, 0);
+        }
+      },
+    );
+
     ctx.expose({
       setRowExpand: rows.setRowExpand,
       setAllRowExpand: rows.setAllRowExpand,

diff --git a/packages/virtual-render/src/use-scrollbar.tsx b/packages/virtual-render/src/use-scrollbar.tsx
@@ -41,20 +41,21 @@ export default (props: VirtualRenderProps) => {
   };
 
   const scrollTo = (x, y) => {
-    instance.scrollTo({ x, y });
+    instance?.scrollTo({ x, y });
   };
 
   const updateScrollHeight = (height: number) => {
     if (instance?.element) {
-      (instance.element as VirtualElement).scrollHeight = height;
-      instance.update();
+      (instance?.element as VirtualElement).scrollHeight = height;
+      instance?.update();
     }
   };
 
   return {
     init,
     instance,
     scrollTo,
+    update: () => instance?.update(),
     updateScrollHeight,
   };
 };
diff --git a/packages/virtual-render/src/v-virtual-render.ts b/packages/virtual-render/src/v-virtual-render.ts
@@ -102,19 +102,33 @@ export class VisibleRender {
   private binding;
   private wrapper;
   private delay;
+  private delegateWrapper;
   constructor(binding, el) {
     this.binding = binding;
     this.wrapper = el;
     const { throttleDelay } = binding.value;
     this.delay = throttleDelay;
+    this.delegateWrapper = undefined;
+  }
+
+  get scrollHeight() {
+    return this.delegateWrapper?.scrollHeight ?? this.wrapper?.scrollHeight;
+  }
+
+  get offsetHeight() {
+    return this.delegateWrapper?.offsetHeight ?? this.wrapper?.offsetHeight;
+  }
+
+  public setDelegateWrapper(el) {
+    this.delegateWrapper = el;
   }
 
   public render(e) {
     const { lineHeight = 30, handleScrollCallback, pagination = {}, onlyScroll } = this.binding.value;
     if (onlyScroll) {
       const elScrollTop = e.offset?.y;
       const elScrollLeft = e.offset?.x ?? 0;
-      const bottom = this.wrapper.scrollHeight - this.wrapper.offsetHeight - elScrollTop;
+      const bottom = this.scrollHeight - this.offsetHeight - elScrollTop;
       handleScrollCallback(e, null, null, elScrollTop, elScrollTop, elScrollLeft, {
         bottom: bottom >= 0 ? bottom : 0,
         scrollbar: e,
@@ -127,7 +141,7 @@ export class VisibleRender {
       lineHeight,
       handleScrollCallback,
       { scrollTop, startIndex, endIndex, groupItemCount, count, scrollLeft },
-      this.wrapper,
+      this.delegateWrapper ?? this.wrapper,
       e,
     );
   }