diff --git a/examples/sites/demos/apis/grid.js b/examples/sites/demos/apis/grid.js
index edbbadba08..f0bbb2e767 100644
--- a/examples/sites/demos/apis/grid.js
+++ b/examples/sites/demos/apis/grid.js
@@ -3563,9 +3563,11 @@ interface IEditConfig {
showStatus?: boolean
// 自定义编辑规则,返回true可以编辑返回false则禁止编辑
activeMethod?: ({row: IRow, column: IColumnConfig})=> boolean
- // (3.19新增)当mode为'row'时,行编辑激活状态下默认会忽略activeMethod,配置为true使其生效
+ // (3.19.0新增)当mode为'row'时,行编辑激活状态下默认会忽略activeMethod,配置为true使其生效
activeStrictly?: boolean
-}
+ //(3.25.0新增)自定义编辑态的退出逻辑。当返回true时,不会退出编辑态。
+ blurOutside?: ({ cell, event, $table }: { cell: HTMLElement, event: Event, $table: Component }) => boolean
+}
`
},
{
diff --git a/examples/sites/demos/pc/app/grid/edit/scrollbar-not-blur-composition-api.vue b/examples/sites/demos/pc/app/grid/edit/scrollbar-not-blur-composition-api.vue
new file mode 100644
index 0000000000..11128d56b8
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/edit/scrollbar-not-blur-composition-api.vue
@@ -0,0 +1,119 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/grid/edit/scrollbar-not-blur.spec.ts b/examples/sites/demos/pc/app/grid/edit/scrollbar-not-blur.spec.ts
new file mode 100644
index 0000000000..575c806aae
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/edit/scrollbar-not-blur.spec.ts
@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/test'
+
+test('行编辑滚动不失焦', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+ await page.goto('grid-edit#scrollbar-not-blur')
+ page.setViewportSize({
+ width: 1400,
+ height: 1200
+ })
+
+ const demo = page.locator('#scrollbar-not-blur')
+ // 单元格编辑
+ await demo.getByRole('cell', { name: 'GFD 科技 YX 公司' }).first().click()
+ await expect(demo.locator('.tiny-grid-default-input').first()).toBeVisible()
+
+ // 点击滚动条
+ const bodyWrapper = demo.locator('.tiny-grid__body-wrapper')
+ const { x, y, height } = await bodyWrapper.boundingBox()
+ await page.mouse.move(x + 10, y + height - 3)
+ await page.waitForTimeout(200)
+ await page.mouse.down()
+ await page.waitForTimeout(200)
+ await page.mouse.move(x + 200, y + height - 3)
+ await page.waitForTimeout(200)
+ await page.mouse.up()
+ await expect(demo.locator('.tiny-grid-default-input').first()).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/grid/edit/scrollbar-not-blur.vue b/examples/sites/demos/pc/app/grid/edit/scrollbar-not-blur.vue
new file mode 100644
index 0000000000..a0c5e21c7a
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/edit/scrollbar-not-blur.vue
@@ -0,0 +1,129 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-edit.js b/examples/sites/demos/pc/app/grid/webdoc/grid-edit.js
index 09207e60a2..45b5ac4676 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-edit.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-edit.js
@@ -100,6 +100,18 @@ export default {
'
Table attribute settingedit-config
Enable the editing mode, and then set trigger
in the attribute object to modify the triggering mode. The options are as follows: click trigger (click), double-click trigger (dblclick), and manual trigger (manual)
. The default value is click trigger
.
\n'
},
codeFiles: ['edit/trigger-mode-for-editing.vue']
+ },
+ {
+ demoId: 'scrollbar-not-blur',
+ name: { 'zh-CN': '行编辑滚动不失焦', 'en-US': 'Scroll not blur' },
+ desc: {
+ 'zh-CN': `
+ 配置 edit-config
的blurOutside
自定义编辑态的退出逻辑。
+ `,
+ 'en-US':
+ 'Configure blurOutside
of edit-config
to customize the exit logic of the editing state.
\n'
+ },
+ codeFiles: ['edit/scrollbar-not-blur.vue']
}
],
apis: [{ name: 'grid-edit', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
diff --git a/packages/theme-saas/src/grid/table.less b/packages/theme-saas/src/grid/table.less
index 1fa33d9dda..e00a94778a 100644
--- a/packages/theme-saas/src/grid/table.less
+++ b/packages/theme-saas/src/grid/table.less
@@ -878,7 +878,6 @@
@apply w-full;
height: 100px;
@apply m-0;
- background: url(../images/grid-nodata.svg) no-repeat center center;
@apply flex-shrink-0;
}
diff --git a/packages/vue/src/grid/src/body/src/body.tsx b/packages/vue/src/grid/src/body/src/body.tsx
index 8eff55dc31..be46325b3d 100644
--- a/packages/vue/src/grid/src/body/src/body.tsx
+++ b/packages/vue/src/grid/src/body/src/body.tsx
@@ -421,7 +421,7 @@ function renderRowExpanded(args) {
function renderRowAfter({ $table, _vm, row, rowIndex, rows, id, used }) {
typeof $table.renderRowAfter === 'function' &&
- $table.renderRowAfter.call($table, { rows, row, data: _vm.tableData, rowIndex, renderColumn, id, used }, h)
+ $table.renderRowAfter({ rows, row, data: _vm.tableData, rowIndex, renderColumn, id, used }, h)
}
function renderRow(args) {
@@ -829,7 +829,7 @@ export default defineComponent({
class={{
'tiny-grid__body-wrapper body__wrapper': true,
'is__scrollload': scrollLoad,
- 'no-data': isNoData
+ 'no-data': isNoData && $table.isShapeTable
}}
style={{
height: bodyWrapperHeight ? `${bodyWrapperHeight}px` : undefined,
@@ -868,7 +868,7 @@ export default defineComponent({
isNoData ? (
{$slots.empty
- ? $slots.empty.call(_vm, { $table }, h)
+ ? $slots.empty({ $table }, h)
: $table.renderEmpty
? [$table.renderEmpty(h, $table)]
: [
diff --git a/packages/vue/src/grid/src/cell/src/cell.ts b/packages/vue/src/grid/src/cell/src/cell.ts
index ab10749d61..a4ecd33f6d 100644
--- a/packages/vue/src/grid/src/cell/src/cell.ts
+++ b/packages/vue/src/grid/src/cell/src/cell.ts
@@ -402,7 +402,7 @@ export const Cell = {
const isTreeOrderedFalse = treeConfig && !treeOrdered
let indexValue = startIndex + seq
// tree-config为false的情况下,序号为1.1这种形式
- if (isTreeOrderedFalse && level) {
+ if (isTreeOrderedFalse) {
indexValue = row[temporaryIndex]
}
diff --git a/packages/vue/src/grid/src/mobile-first/column-link.vue b/packages/vue/src/grid/src/mobile-first/column-link.vue
index ad56aa7265..04918108aa 100644
--- a/packages/vue/src/grid/src/mobile-first/column-link.vue
+++ b/packages/vue/src/grid/src/mobile-first/column-link.vue
@@ -38,6 +38,9 @@ export default defineComponent({
vnode = h(
'div',
{
+ attrs: {
+ title: visibleButtons[0].name
+ },
'class': `w-5 h-5 sm:w-4 sm:w-4 ${
isDisabled(visibleButtons[0]) ? 'fill-color-icon-disabled' : 'fill-color-icon-secondary'
} `
@@ -70,7 +73,7 @@ export default defineComponent({
DropdownItem,
{
class: { [disabledClass || '']: isDisabled(buttonConfig) },
- props: { itemData: buttonConfig.name, disabled: isDisabled(buttonConfig) }
+ props: { itemData: buttonConfig.name, disabled: isDisabled(buttonConfig), icon: buttonConfig.icon }
},
buttonConfig.name
)
diff --git a/packages/vue/src/grid/src/mobile-first/index.vue b/packages/vue/src/grid/src/mobile-first/index.vue
index 50d0b081c3..25a221b8e1 100644
--- a/packages/vue/src/grid/src/mobile-first/index.vue
+++ b/packages/vue/src/grid/src/mobile-first/index.vue
@@ -8,13 +8,13 @@
@scroll="scrollEvent"
>
-
+
@@ -171,6 +171,10 @@ export default defineComponent({
const { tableData } = this as any
const isException = tableData.length === 0
return isException
+ },
+ isLoading() {
+ const { config } = this as any
+ return config?.tableVm?.$grid?.loading || false
}
},
watch: {
diff --git a/packages/vue/src/grid/src/table/src/methods.ts b/packages/vue/src/grid/src/table/src/methods.ts
index a79a73a8b7..643dcc24e9 100644
--- a/packages/vue/src/grid/src/table/src/methods.ts
+++ b/packages/vue/src/grid/src/table/src/methods.ts
@@ -1133,6 +1133,10 @@ const Methods = {
return Boolean(editor.blurOutside({ cell: args.cell, event }))
}
+ if (typeof editConfig.blurOutside === 'function') {
+ return Boolean(editConfig.blurOutside({ cell: args.cell, event, $table: this }))
+ }
+
const blurClassConfig = editor.blurClass || editConfig.blurClass
if (blurClassConfig) {