From d87e7ea8ab35dd1a81d6d165a9f89912f7a67665 Mon Sep 17 00:00:00 2001 From: gimmyhehe <975402925@qq.com> Date: Thu, 10 Jul 2025 20:27:24 +0800 Subject: [PATCH] feat(grid): add filter root attrs (#3565) * feat(grid): add filter root attrs * fix: rename rootAttrs to attrs * docs(grid): optimize grid docs --- examples/sites/demos/apis/grid.js | 36 ++++++++++++------- .../filter/default-filter-composition-api.vue | 6 ++++ .../pc/app/grid/filter/default-filter.vue | 6 ++++ .../vue/src/grid/src/filter/src/methods.ts | 7 +--- .../vue/src/grid/src/filter/src/panel.tsx | 5 ++- 5 files changed, 41 insertions(+), 19 deletions(-) diff --git a/examples/sites/demos/apis/grid.js b/examples/sites/demos/apis/grid.js index 399b00cab..99816851e 100644 --- a/examples/sites/demos/apis/grid.js +++ b/examples/sites/demos/apis/grid.js @@ -2949,8 +2949,14 @@ export default { name: 'default', defaultValue: '', desc: { - 'zh-CN': - '自定义显示内容模板，作用插槽参数说明：slots.default({ $table, column, row },h)，$table：表格组件对象，column：当前列配置，row：当前行数据,h：vue的渲染函数', + 'zh-CN': `自定义显示内容模板，作用域插槽参数说明：
+ slots.default({ $table, column, row, level, data, rowIndex, $rowIndex, columnIndex, $columnIndex, seq }, h)，
+ $table：表格组件对象，column：当前列配置，row：当前行数据，
+ level：当前行在树表中的层级，data：表格数据，
+ rowIndex：所有行中(包含虚拟滚动等隐藏列)下标，$rowIndex:已渲染行中的下标，
+ columnIndex：所有列中(包含虚拟滚动等隐藏列)下标，$columnIndex:已渲染列中的下标，
+ seq：单元格所在行的序号，$seq:已弃用，
+ h：vue的渲染函数`, 'en-US': 'Customized display content template' }, mode: ['pc', 'mobile-first'], @@ -2960,8 +2966,7 @@ export default { name: 'edit', defaultValue: '', desc: { - 'zh-CN': - '自定义可编辑组件模板，作用插槽参数说明：slots.edit({ $table, column, row },h)，$table：表格组件对象，column：当前列配置，row：当前行数据,h：vue的渲染函数', + 'zh-CN': '自定义可编辑组件模板，作用域插槽参数同 default 插槽', 'en-US': 'Customized Editable Component Template' }, mode: ['pc', 'mobile-first'], @@ -2974,8 +2979,7 @@ export default { stable: '3.25.0' }, desc: { - 'zh-CN': - '自定义展开行图标，作用插槽参数说明：slots.expand-trigger({ $table, column, row },h)，$table：表格组件对象，column：当前列配置，row：当前行数据,h：vue的渲染函数', + 'zh-CN': '自定义展开行图标，作用域插槽参数同 default 插槽', 'en-US': 'Customized expand row icon' }, mode: ['pc', 'mobile-first'], @@ -2996,8 +3000,11 @@ export default { name: 'header', defaultValue: '', desc: { - 'zh-CN': - '自定义表头内容的模板，作用插槽参数说明：slots.header({ $table, column, columnIndex，$rowIndex},h)，$table：表格组件对象，column：当前列配置，columnIndex：当前列索引,$rowIndex:当前行索引,h：vue的渲染函数', + 'zh-CN': `自定义表头内容的模板，作用插槽参数说明：
+ slots.header({ $table, column, columnIndex，$columnIndex，} ,h)，
+ $table：表格组件对象，column：当前列配置，
+ columnIndex：所有列中(包含虚拟滚动等隐藏列)下标，$columnIndex:已渲染列中的下标，
+ h：vue的渲染函数`, 'en-US': 'Template of custom table header content' }, mode: ['pc', 'mobile-first'], @@ -4155,6 +4162,8 @@ interface IFilterConfig { // 设置枚举数据的实际值属性字段， 默认'value' value: string }[] | () => Promise + // 3.25.0新增，设置过滤面板根节点属性 + attrs: { [props: string]: string } } ` }, @@ -4182,22 +4191,25 @@ interface IFilterConfig { depTypes: ['IColumnConfig', 'IRow'], code: ` interface ICellClassNameArgs { - seq: number // 当前行在树表中的层级 level: number // 当前行数据 row: IRow // 表格数据 data: IRow[] - // 表格行索引 + // 所有行中(包含虚拟滚动等隐藏列)下标 rowIndex: number + // 已渲染行中的下标 $rowIndex: number // 表格列配置 column: IColumnConfig - // 所有列中(包含隐藏列)索引 + // 所有列中(包含虚拟滚动等隐藏列)下标 columnIndex: number - // 已渲染列中的索引 + // 已渲染列中的下标 $columnIndex: number + // 单元格所在行的序号 + seq: number + $seq: string // 已弃用 }` } ] diff --git a/examples/sites/demos/pc/app/grid/filter/default-filter-composition-api.vue b/examples/sites/demos/pc/app/grid/filter/default-filter-composition-api.vue index c676e5e8e..1cc39356b 100644 --- a/examples/sites/demos/pc/app/grid/filter/default-filter-composition-api.vue +++ b/examples/sites/demos/pc/app/grid/filter/default-filter-composition-api.vue @@ -103,6 +103,9 @@ const tableData = ref([ } ]) const cityFilter = ref({ + attrs: { + id: 'city-filter' + }, multi: true, enumable: true, defaultFilter: false, @@ -110,6 +113,9 @@ const cityFilter = ref({ values: filteData }) const nameFilter = ref({ + attrs: { + id: 'name-filter' + }, multi: true, enumable: true, defaultFilter: false, diff --git a/examples/sites/demos/pc/app/grid/filter/default-filter.vue b/examples/sites/demos/pc/app/grid/filter/default-filter.vue index 0781570fa..dff95ce91 100644 --- a/examples/sites/demos/pc/app/grid/filter/default-filter.vue +++ b/examples/sites/demos/pc/app/grid/filter/default-filter.vue @@ -110,6 +110,9 @@ export default { } ], cityFilter: { + attrs: { + id: 'city-filter' // 给根节点设置id + }, multi: true, enumable: true, defaultFilter: false, @@ -117,6 +120,9 @@ export default { values: filteData }, nameFilter: { + attrs: { + id: 'name-filter' + }, multi: true, enumable: true, defaultFilter: false, diff --git a/packages/vue/src/grid/src/filter/src/methods.ts b/packages/vue/src/grid/src/filter/src/methods.ts index e361ba54e..6b74777f0 100644 --- a/packages/vue/src/grid/src/filter/src/methods.ts +++ b/packages/vue/src/grid/src/filter/src/methods.ts @@ -218,12 +218,7 @@ export default { this.getOptions(column).then((options) => { Object.assign(filterStore, { args: params, - layout: filter.layout, // 布局配置，用户可以自定义想要的筛选项 - enumable: filter.enumable, - inputFilter: filter.inputFilter, - simpleFilter: filter.simpleFilter, - onResetInputFilter: filter.onResetInputFilter, - extends: filter.extends, + ...filter, defaultFilter: isBoolean(filter.defaultFilter) ? filter.defaultFilter : true, options: options.map(({ value, label }) => { return { diff --git a/packages/vue/src/grid/src/filter/src/panel.tsx b/packages/vue/src/grid/src/filter/src/panel.tsx index cebeec970..87dad86c3 100644 --- a/packages/vue/src/grid/src/filter/src/panel.tsx +++ b/packages/vue/src/grid/src/filter/src/panel.tsx @@ -30,7 +30,7 @@ import { PopperJS } from '@opentiny/utils' import { PopupManager } from '@opentiny/utils' import { extend } from '@opentiny/utils' import { t } from '@opentiny/vue-locale' -import { hooks, h, $prefix, defineComponent } from '@opentiny/vue-common' +import { hooks, h, $prefix, defineComponent, isVue2 } from '@opentiny/vue-common' import { iconCheck, iconCheckedSur, iconHalfselect, iconSearch } from '@opentiny/vue-icon' import { debounce } from '@opentiny/utils' @@ -231,8 +231,11 @@ export default defineComponent({ filterActive: 'filter__active' } + const wrapperAttrs = isVue2 ? { attrs: filterStore.attrs } : filterStore.attrs + return (