Skip to content

Commit 5e46ccb

Browse files
gimmyhehegimmyhehe
committed
docs(grid): [grid] optimize grid demos and e2e
1 parent 9acc34e commit 5e46ccb

35 files changed

+60
-38
lines changed

‎examples/sites/demos/pc/app/grid/context-menu/cell-menu-composition-api.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
body: { options: bodyMenus },
88
visibleMethod
99
}"
10+
show-overflow="tooltip"
1011
@cell-context-menu="cellContextMenuEvent"
1112
@context-menu-click="contextMenuClickEvent"
1213
>

‎examples/sites/demos/pc/app/grid/context-menu/cell-menu.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
body: { options: bodyMenus },
88
visibleMethod
99
}"
10+
show-overflow="tooltip"
1011
@cell-context-menu="cellContextMenuEvent"
1112
@context-menu-click="contextMenuClickEvent"
1213
>

‎examples/sites/demos/pc/app/grid/context-menu/footer-menu-composition-api.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
footer: { options: footerMenus },
88
visibleMethod
99
}"
10+
show-overflow="tooltip"
1011
show-footer
1112
:footer-method="footerMethod"
1213
@context-menu-click="contextMenuClickEvent"

‎examples/sites/demos/pc/app/grid/context-menu/footer-menu.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
footer: { options: footerMenus },
88
visibleMethod
99
}"
10+
show-overflow="tooltip"
1011
show-footer
1112
:footer-method="footerMethod"
1213
@context-menu-click="contextMenuClickEvent"

‎examples/sites/demos/pc/app/grid/context-menu/header-menu-composition-api.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
header: { options: headerMenus },
77
visibleMethod
88
}"
9+
show-overflow="tooltip"
910
@context-menu-click="contextMenuClickEvent"
1011
>
1112
<tiny-grid-column type="index" width="60"></tiny-grid-column>

‎examples/sites/demos/pc/app/grid/context-menu/header-menu.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
header: { options: headerMenus },
77
visibleMethod
88
}"
9+
show-overflow="tooltip"
910
@context-menu-click="contextMenuClickEvent"
1011
>
1112
<tiny-grid-column type="index" width="60"></tiny-grid-column>

‎examples/sites/demos/pc/app/grid/context-menu/menu-permissions-composition-api.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
visibleMethod
1010
}"
1111
show-footer
12+
show-overflow="tooltip"
1213
:footer-method="footerMethod"
1314
@cell-context-menu="cellContextMenuEvent"
1415
@context-menu-click="contextMenuClickEvent"

‎examples/sites/demos/pc/app/grid/context-menu/menu-permissions.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
visibleMethod
1010
}"
1111
show-footer
12+
show-overflow="tooltip"
1213
:footer-method="footerMethod"
1314
@cell-context-menu="cellContextMenuEvent"
1415
@context-menu-click="contextMenuClickEvent"

‎examples/sites/demos/pc/app/grid/data-source/columns-composition-api.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<tiny-grid :columns="columnsData" :data="tableData" ref="theGridRef"> </tiny-grid>
3+
<tiny-grid :columns="columnsData" :data="tableData" ref="theGridRef" show-overflow="tooltip"> </tiny-grid>
44
</div>
55
</template>
66

‎examples/sites/demos/pc/app/grid/data-source/columns.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<tiny-grid :columns="columnsData" :data="tableData" ref="theGrid"> </tiny-grid>
3+
<tiny-grid :columns="columnsData" :data="tableData" ref="theGrid" show-overflow="tooltip"> </tiny-grid>
44
</div>
55
</template>
66

‎examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns-composition-api.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -222,3 +222,9 @@ function getMonthBetween(start, end) {
222222
return result
223223
}
224224
</script>
225+
226+
<style scoped>
227+
:deep(.tiny-picker) {
228+
width: 300px;
229+
}
230+
</style>

‎examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -228,3 +228,9 @@ export default {
228228
}
229229
}
230230
</script>
231+
232+
<style scoped>
233+
:deep(.tiny-picker) {
234+
width: 300px;
235+
}
236+
</style>

‎examples/sites/demos/pc/app/grid/event/click-event-composition-api.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
@footer-cell-dblclick="footerCellDbClick"
1111
:footer-method="footerMethod"
1212
show-footer
13+
show-overflow="tooltip"
1314
>
1415
<tiny-grid-column type="index" width="60"></tiny-grid-column>
1516
<tiny-grid-column field="name" title="名称"></tiny-grid-column>

‎examples/sites/demos/pc/app/grid/event/click-event.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
@footer-cell-click="footerClick"
1010
@footer-cell-dblclick="footerCellDbClick"
1111
show-footer
12+
show-overflow="tooltip"
1213
:footer-method="footerMethod"
1314
>
1415
<tiny-grid-column type="index" width="60"></tiny-grid-column>

‎examples/sites/demos/pc/app/grid/event/context-menu-event-composition-api.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
visibleMethod
1212
}"
1313
show-footer
14+
show-overflow="tooltip"
1415
:footer-method="footerMethod"
1516
@context-menu-click="contextMenuClickEvent"
1617
>

‎examples/sites/demos/pc/app/grid/event/context-menu-event.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
visibleMethod
1212
}"
1313
show-footer
14+
show-overflow="tooltip"
1415
:footer-method="footerMethod"
1516
@context-menu-click="contextMenuClickEvent"
1617
>

‎examples/sites/demos/pc/app/grid/event/valid-error-event-composition-api.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<tiny-grid
44
:data="tableData"
55
@valid-error="validError"
6+
show-overflow="tooltip"
67
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
78
:edit-rules="validRules"
89
>

‎examples/sites/demos/pc/app/grid/event/valid-error-event.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<tiny-grid
44
:data="tableData"
55
@valid-error="validError"
6+
show-overflow="tooltip"
67
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
78
:edit-rules="validRules"
89
>

‎examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active-composition-api.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<tiny-grid
33
column-min-width="100"
4-
auto-resize
4+
show-overflow="tooltip"
55
:column-anchor="columnAnchor"
66
:optimization="{ scrollX: { gt: 20 } }"
77
:fetch-data="fetchData"

‎examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<tiny-grid
33
column-min-width="100"
4-
auto-resize
4+
show-overflow="tooltip"
55
:column-anchor="columnAnchor"
66
:optimization="{ scrollX: { gt: 20 } }"
77
:fetch-data="fetchData"

‎examples/sites/demos/pc/app/grid/large-data/column-anchor-composition-api.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@
33
<tiny-grid
44
:data="tableData"
55
column-min-width="100"
6-
auto-resize
6+
show-overflow="tooltip"
77
:column-anchor="columnAnchor"
88
:optimization="{ scrollX: { gt: 20 } }"
9-
height="auto"
109
>
1110
<tiny-grid-column field="name0" title="名称0" sortable fixed="left"></tiny-grid-column>
1211
<tiny-grid-column field="name1" title="名称1" sortable fixed="left"></tiny-grid-column>

‎examples/sites/demos/pc/app/grid/large-data/column-anchor.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@
33
<tiny-grid
44
:data="tableData"
55
column-min-width="100"
6-
auto-resize
6+
show-overflow="tooltip"
77
:column-anchor="columnAnchor"
88
:optimization="{ scrollX: { gt: 20 } }"
9-
height="auto"
109
>
1110
<tiny-grid-column field="name0" title="名称0" sortable fixed="left"></tiny-grid-column>
1211
<tiny-grid-column field="name1" title="名称1" sortable fixed="left"></tiny-grid-column>

‎examples/sites/demos/pc/app/grid/large-data/scroll-to-composition-api.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<tiny-button @click="scrollToColumn">滚动到500列</tiny-button>
77
</div>
88
<br />
9-
<tiny-grid ref="tinyGridRef" height="300"> </tiny-grid>
9+
<tiny-grid ref="tinyGridRef" height="300" column-width="100"> </tiny-grid>
1010
</div>
1111
</template>
1212

‎examples/sites/demos/pc/app/grid/large-data/scroll-to.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<tiny-button @click="scrollToColumn">滚动到500列</tiny-button>
77
</div>
88
<br />
9-
<tiny-grid ref="tinyGrid" height="300"> </tiny-grid>
9+
<tiny-grid ref="tinyGrid" height="300" column-width="100"> </tiny-grid>
1010
</div>
1111
</template>
1212

‎examples/sites/demos/pc/app/grid/loading/grid-custom-loading-composition-api.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,14 +57,14 @@ init()
5757
5858
const loadingComponent = () => (
5959
<div class="custom-loading">
60-
<span>正在加载中。。。</span>
60+
<span>正在加载中...</span>
6161
</div>
6262
)
6363
</script>
6464

6565
<style scoped>
6666
.custom-loading {
67-
font-size: 20px;
67+
font-size: 16px;
6868
width: 100%;
6969
height: 100%;
7070
display: flex;

‎examples/sites/demos/pc/app/grid/loading/grid-custom-loading.spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@ import { test, expect } from '@playwright/test'
33
test('自定义表格加载', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('grid-loading#loading-grid-custom-loading')
6-
await expect(page.getByText('正在加载中。。。')).toBeVisible()
6+
await expect(page.getByText('正在加载中...')).toBeVisible()
77
})

‎examples/sites/demos/pc/app/grid/loading/grid-custom-loading.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default {
3232
loadingComponent() {
3333
return (
3434
<div class="custom-loading">
35-
<span>正在加载中。。。</span>
35+
<span>正在加载中...</span>
3636
</div>
3737
)
3838
},
@@ -77,7 +77,7 @@ export default {
7777

7878
<style scoped>
7979
.custom-loading {
80-
font-size: 20px;
80+
font-size: 16px;
8181
width: 100%;
8282
height: 100%;
8383
display: flex;

‎examples/sites/demos/pc/app/grid/operation-column/selection-operation-composition-api.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,23 +19,23 @@ import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
1919
const toolbarButtons = ref([
2020
{
2121
code: 'clearSelection',
22-
name: '手动取消多选行'
22+
name: '取消多选行'
2323
},
2424
{
2525
code: 'setAllSelection',
26-
name: '手动选中所有行'
26+
name: '选中所有行'
2727
},
2828
{
2929
code: 'setSelection',
30-
name: '手动选中指定行'
30+
name: '选中指定行'
3131
},
3232
{
3333
code: 'toggleAllSelection',
34-
name: '手动切换所有行选中状态'
34+
name: '切换所有行选中状态'
3535
},
3636
{
3737
code: 'toggleRowSelection',
38-
name: '手动切换指定行选中状态'
38+
name: '切换指定行选中状态'
3939
}
4040
])
4141
const tableData = ref([

‎examples/sites/demos/pc/app/grid/operation-column/selection-operation.spec.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,18 @@ import { test, expect } from '@playwright/test'
33
test('多选项操作', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('grid-operation-column#operation-column-selection-operation')
6-
await page.getByRole('button', { name: '手动选中指定行' }).click()
6+
await page.getByRole('button', { name: '选中指定行' }).click()
77
await expect(page.locator('.tiny-grid-body__row').nth(4).locator('input')).toBeChecked()
8-
await page.getByRole('button', { name: '手动切换指定行选中状态' }).click()
8+
await page.getByRole('button', { name: '切换指定行选中状态' }).click()
99
await expect(page.locator('.tiny-grid-body__row').nth(1).locator('input')).toBeChecked()
10-
await page.getByRole('button', { name: '手动切换指定行选中状态' }).click()
10+
await page.getByRole('button', { name: '切换指定行选中状态' }).click()
1111
await expect(page.locator('.tiny-grid-body__row').nth(1).locator('input')).not.toBeChecked()
1212

13-
await page.getByRole('button', { name: '手动选中所有行' }).click()
13+
await page.getByRole('button', { name: '选中所有行' }).click()
1414
for (const check of await page.locator('.tiny-grid-checkbox input').all()) {
1515
await expect(check).toBeChecked()
1616
}
17-
await page.getByRole('button', { name: '手动取消多选行' }).click()
17+
await page.getByRole('button', { name: '取消多选行' }).click()
1818
for (const check of await page.locator('.tiny-grid-checkbox input').all()) {
1919
await expect(check).not.toBeChecked()
2020
}

‎examples/sites/demos/pc/app/grid/operation-column/selection-operation.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,23 +26,23 @@ export default {
2626
toolbarButtons: [
2727
{
2828
code: 'clearSelection',
29-
name: '手动取消多选行'
29+
name: '取消多选行'
3030
},
3131
{
3232
code: 'setAllSelection',
33-
name: '手动选中所有行'
33+
name: '选中所有行'
3434
},
3535
{
3636
code: 'setSelection',
37-
name: '手动选中指定行'
37+
name: '选中指定行'
3838
},
3939
{
4040
code: 'toggleAllSelection',
41-
name: '手动切换所有行选中状态'
41+
name: '切换所有行选中状态'
4242
},
4343
{
4444
code: 'toggleRowSelection',
45-
name: '手动切换指定行选中状态'
45+
name: '切换指定行选中状态'
4646
}
4747
],
4848
tableData: [

‎examples/sites/demos/pc/app/grid/size/fixed-column-width-composition-api.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<tiny-grid :data="tableData">
33
<tiny-grid-column field="name" title="名称" width="150"></tiny-grid-column>
4-
<tiny-grid-column field="area" title="所属区域" width="80"></tiny-grid-column>
4+
<tiny-grid-column field="area" title="所属区域" width="100"></tiny-grid-column>
55
<tiny-grid-column field="address" title="地址" width="20%"></tiny-grid-column>
6-
<tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
6+
<tiny-grid-column field="introduction" title="公司简介"></tiny-grid-column>
77
</tiny-grid>
88
</template>
99

‎examples/sites/demos/pc/app/grid/size/fixed-column-width.spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@ test('列属性设置宽度', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('grid-size#size-fixed-column-width')
66
await expect(page.getByRole('cell', { name: '名称' }).first()).toHaveCSS('width', '150px')
7-
await expect(page.getByRole('cell', { name: '所属区域' })).toHaveCSS('width', '80px')
7+
await expect(page.getByRole('cell', { name: '所属区域' })).toHaveCSS('width', '100px')
88
})

‎examples/sites/demos/pc/app/grid/size/fixed-column-width.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<tiny-grid :data="tableData">
33
<tiny-grid-column field="name" title="名称" width="150"></tiny-grid-column>
4-
<tiny-grid-column field="area" title="所属区域" width="80"></tiny-grid-column>
4+
<tiny-grid-column field="area" title="所属区域" width="100"></tiny-grid-column>
55
<tiny-grid-column field="address" title="地址" width="20%"></tiny-grid-column>
6-
<tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
6+
<tiny-grid-column field="introduction" title="公司简介"></tiny-grid-column>
77
</tiny-grid>
88
</template>
99

‎examples/sites/src/views/layout/layout.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -290,7 +290,7 @@ export default defineComponent({
290290
}
291291
292292
.tiny-input {
293-
margin: 0 10px 12px;
293+
margin: 0 10px 16px;
294294
width: auto;
295295
max-width: unset;
296296
}

‎packages/theme/src/grid/table.less

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -905,8 +905,6 @@
905905
}
906906

907907
.@{grid-prefix-cls}-body__column {
908-
.DefaultTdPadding();
909-
910908
&.col__actived {
911909
padding: 0 var(--tv-Grid-cell-padding-x);
912910
}

0 commit comments

Comments
 (0)