feat: added the filter-popper-option attribute to control the filter panel (#4034)

* fix: modify the filtering panel of the table

* fix: modify review comments

* fix: modify review comments

* fix: modify review comments

Author: James-9696

examples/sites/demos/apis/grid.js

@@ -30,6 +30,23 @@ export default {
           pcDemo: 'grid-data-source#data-source-auto-load',
           mfDemo: ''
         },
+        {
+          name: 'filter-popper-options',
+          typeAnchorName: 'IPopperOption',
+          type: 'IPopperOption',
+          defaultValue: '{}',
+          desc: {
+            'zh-CN': '过滤面板弹出层配置项；具体参考 IPopperOption 的描述',
+            'en-US':
+              'Configuration item for the filter panel pop-up layer; refer to the description of IPopperOption for details'
+          },
+          meta: {
+            stable: '3.29.0'
+          },
+          mode: ['pc'],
+          pcDemo: 'grid-filter#filter-default-filter',
+          mfDemo: ''
+        },
         {
           name: 'auto-resize',
           type: 'boolean',
@@ -3217,6 +3234,21 @@ export default {
     }
   ],
   types: [
+    {
+      name: 'IPopperOption',
+      type: 'interface',
+      code: `
+    interface IPopperOption {
+      bubbling: boolean // 是否监听元素所有上级有滚动元素的scroll事件，监听到则更新popper的位置。用于解决某些弹出层位置在页面滚动时，位置不正确的场景，默认false
+      followReferenceHide: boolean // 当触发源隐藏时，自动隐藏弹出层，默认true
+      removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
+      updateHiddenPopperOnScroll: boolean  // 滚动过程中是否更新隐藏的弹出层位置
+      boundariesElement: 'viewport' | 'body' | HTMLElement // 滚动过程中,弹出层的碰撞边界。 默认值为： 'viewport'
+      ignoreBoundaries: boolean  // 忽略边界判断，弹出的位置始终是设置的 placement 值
+      scrollParent:  HTMLElement  // 指定滚动的父节点，优化级最高。 默认为null
+    }
+          `
+    },
     {
       name: 'IRow',
       type: 'interface',

examples/sites/demos/pc/app/grid/filter/default-filter-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-grid :data="tableData" @toolbar-button-click="toolbarButtonClickEvent">
+  <tiny-grid :data="tableData" :filter-popper-options="popperConfigs" @toolbar-button-click="toolbarButtonClickEvent">
     <template #toolbar>
       <tiny-grid-toolbar :buttons="toolbarButtons"> </tiny-grid-toolbar>
     </template>
@@ -30,6 +30,10 @@ const filteData = [
   { label: '韶关', value: '韶关' }
 ]
 
+const popperConfigs = {
+  bubbling: true
+}
+
 const toolbarButtons = ref([
   {
     code: 'clearFilter',

examples/sites/demos/pc/app/grid/filter/default-filter.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-grid :data="tableData" @toolbar-button-click="toolbarButtonClickEvent">
+  <tiny-grid :data="tableData" :filter-popper-options="popperConfigs" @toolbar-button-click="toolbarButtonClickEvent">
     <template #toolbar>
       <tiny-grid-toolbar :buttons="toolbarButtons"> </tiny-grid-toolbar>
     </template>
@@ -37,6 +37,9 @@ export default {
   },
   data() {
     return {
+      popperConfigs: {
+        bubbling: true
+      },
       toolbarButtons: [
         {
           code: 'clearFilter',

examples/sites/demos/pc/app/grid/webdoc/grid-filter.js

@@ -18,6 +18,7 @@ export default {
               <li>values 设置在显示枚举选项功能 (enumable) 下制定静态数据源。</li>
               <li>label 设置枚举数据的显示值属性字段，默认'label'。</li>
               <li>value 设置枚举数据的实际值属性字段，默认'value'。</li>
+              <li>filter-popper-options 设置过滤面板弹出层配置项</li>
             </ul>
           </p>
         </div>

packages/vue/src/grid/src/filter/src/panel.tsx

@@ -214,6 +214,7 @@ export default defineComponent({
       renderBase,
       renderSimple
     } = this as any
+
     const { args, column, options, layout = 'input,enum,default,extends,base' } = filterStore
     const layoutMap = {
       input: renderInput,
@@ -309,7 +310,8 @@ export default defineComponent({
 
           this.popperJS = new PopperJS(reference, popper, {
             placement: 'bottom-end',
-            gpuAcceleration: false
+            gpuAcceleration: false,
+            ...(this.$grid?.filterPopperOptions || {})
           })
           popper.style.display = 'block'
         })

packages/vue/src/grid/src/grid/grid.ts

@@ -129,7 +129,11 @@ export default defineComponent({
       default: false
     },
     isMultipleHistory: Boolean,
-    selectToolbar: [Boolean, Object]
+    selectToolbar: [Boolean, Object],
+    filterPopperOptions: {
+      type: Object,
+      default: () => ({})
+    }
   },
   data() {
     return {