Skip to content

docs(grid): [grid] optimize grid demos and e2e #2457

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 29, 2024
Merged

docs(grid): [grid] optimize grid demos and e2e #2457

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5e46ccb
docs(grid): [grid] optimize grid demos and e2e
gimmyhehe Oct 28, 2024
bb9e4a4
fix(grid): fix grid demo
gimmyhehe Oct 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/sites/demos/pc/app/grid/context-menu/cell-menu-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
body: { options: bodyMenus },
visibleMethod
}"
show-overflow="tooltip"
@cell-context-menu="cellContextMenuEvent"
@context-menu-click="contextMenuClickEvent"
>
Expand Down
1 change: 1 addition & 0 deletions examples/sites/demos/pc/app/grid/context-menu/cell-menu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
body: { options: bodyMenus },
visibleMethod
}"
show-overflow="tooltip"
@cell-context-menu="cellContextMenuEvent"
@context-menu-click="contextMenuClickEvent"
>
Expand Down
1 change: 1 addition & 0 deletions examples/sites/demos/pc/app/grid/context-menu/footer-menu-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
footer: { options: footerMenus },
visibleMethod
}"
show-overflow="tooltip"
show-footer
:footer-method="footerMethod"
@context-menu-click="contextMenuClickEvent"
Expand Down
1 change: 1 addition & 0 deletions examples/sites/demos/pc/app/grid/context-menu/footer-menu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
footer: { options: footerMenus },
visibleMethod
}"
show-overflow="tooltip"
show-footer
:footer-method="footerMethod"
@context-menu-click="contextMenuClickEvent"
Expand Down
1 change: 1 addition & 0 deletions examples/sites/demos/pc/app/grid/context-menu/header-menu-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
header: { options: headerMenus },
visibleMethod
}"
show-overflow="tooltip"
@context-menu-click="contextMenuClickEvent"
>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
Expand Down
1 change: 1 addition & 0 deletions examples/sites/demos/pc/app/grid/context-menu/header-menu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
header: { options: headerMenus },
visibleMethod
}"
show-overflow="tooltip"
@context-menu-click="contextMenuClickEvent"
>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
Expand Down
1 change: 1 addition & 0 deletions examples/sites/demos/pc/app/grid/context-menu/menu-permissions-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
visibleMethod
}"
show-footer
show-overflow="tooltip"
:footer-method="footerMethod"
@cell-context-menu="cellContextMenuEvent"
@context-menu-click="contextMenuClickEvent"
Expand Down
1 change: 1 addition & 0 deletions examples/sites/demos/pc/app/grid/context-menu/menu-permissions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
visibleMethod
}"
show-footer
show-overflow="tooltip"
:footer-method="footerMethod"
@cell-context-menu="cellContextMenuEvent"
@context-menu-click="contextMenuClickEvent"
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/grid/data-source/columns-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div>
<tiny-grid :columns="columnsData" :data="tableData" ref="theGridRef"> </tiny-grid>
<tiny-grid :columns="columnsData" :data="tableData" ref="theGridRef" show-overflow="tooltip"> </tiny-grid>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

E2E test coverage needed for grid tooltip overflow feature

The codebase currently lacks specific test coverage for the grid tooltip overflow functionality. While there are numerous grid-related tests, none specifically verify the show-overflow="tooltip" behavior.

  • Add e2e test at examples/sites/demos/pc/app/grid/data-source/columns-composition-api.spec.js to verify:
    • Tooltip appears when cell content overflows
    • Tooltip displays the full content
    • Tooltip behavior works consistently across all columns
🔗 Analysis chain

LGTM! Consider adding e2e tests for tooltip behavior.

The addition of show-overflow="tooltip" is a good improvement for handling long content, particularly for fields like 'introduction' that contain lengthy text.

Let's verify if e2e tests exist for this tooltip behavior:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for existing e2e tests related to grid overflow tooltips
rg -g '*.{spec,test}.{js,ts,vue}' -i "show-overflow.*tooltip"

Length of output: 63

Script:

#!/bin/bash
# Let's try a broader search for e2e tests related to grid tooltips
rg -g '*.{spec,test}.{js,ts,vue}' -i "tooltip.*grid|grid.*tooltip"

# Also search for any grid overflow tests
rg -g '*.{spec,test}.{js,ts,vue}' -i "overflow.*grid|grid.*overflow"

# Let's also check if there are any test files specifically for grid features
fd "grid.*\.(spec|test)\.(js|ts|vue)"

Length of output: 2986

Script:

#!/bin/bash
# Let's check the content of the grid test file for any overflow-related tests
cat packages/vue/src/grid/__tests__/grid.test.tsx

# Also check the appearance settings test as it might contain overflow-related tests
cat examples/sites/demos/pc/app/grid/appearance-settings/grid-border.spec.js

Length of output: 15582

</div>
</template>

Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/grid/data-source/columns.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div>
<tiny-grid :columns="columnsData" :data="tableData" ref="theGrid"> </tiny-grid>
<tiny-grid :columns="columnsData" :data="tableData" ref="theGrid" show-overflow="tooltip"> </tiny-grid>
</div>
</template>

Expand Down
6 changes: 6 additions & 0 deletions examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,3 +222,9 @@ function getMonthBetween(start, end) {
return result
}
</script>

<style scoped>
:deep(.tiny-picker) {
width: 300px;
}
</style>
6 changes: 6 additions & 0 deletions examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,3 +228,9 @@ export default {
}
}
</script>

<style scoped>
:deep(.tiny-picker) {
width: 300px;
}
</style>
1 change: 1 addition & 0 deletions examples/sites/demos/pc/app/grid/event/click-event-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
@footer-cell-dblclick="footerCellDbClick"
:footer-method="footerMethod"
show-footer
show-overflow="tooltip"
>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
Expand Down
1 change: 1 addition & 0 deletions examples/sites/demos/pc/app/grid/event/click-event.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
@footer-cell-click="footerClick"
@footer-cell-dblclick="footerCellDbClick"
show-footer
show-overflow="tooltip"
:footer-method="footerMethod"
>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
Expand Down
1 change: 1 addition & 0 deletions examples/sites/demos/pc/app/grid/event/context-menu-event-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
visibleMethod
}"
show-footer
show-overflow="tooltip"
:footer-method="footerMethod"
@context-menu-click="contextMenuClickEvent"
>
Expand Down
1 change: 1 addition & 0 deletions examples/sites/demos/pc/app/grid/event/context-menu-event.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
visibleMethod
}"
show-footer
show-overflow="tooltip"
:footer-method="footerMethod"
@context-menu-click="contextMenuClickEvent"
>
Expand Down
1 change: 1 addition & 0 deletions examples/sites/demos/pc/app/grid/event/valid-error-event-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<tiny-grid
:data="tableData"
@valid-error="validError"
show-overflow="tooltip"
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
:edit-rules="validRules"
>
Expand Down
1 change: 1 addition & 0 deletions examples/sites/demos/pc/app/grid/event/valid-error-event.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<tiny-grid
:data="tableData"
@valid-error="validError"
show-overflow="tooltip"
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
:edit-rules="validRules"
>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<tiny-grid
column-min-width="100"
auto-resize
show-overflow="tooltip"
:column-anchor="columnAnchor"
:optimization="{ scrollX: { gt: 20 } }"
:fetch-data="fetchData"
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<tiny-grid
column-min-width="100"
auto-resize
show-overflow="tooltip"
:column-anchor="columnAnchor"
:optimization="{ scrollX: { gt: 20 } }"
:fetch-data="fetchData"
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/grid/large-data/column-anchor-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<tiny-grid
:data="tableData"
column-min-width="100"
auto-resize
show-overflow="tooltip"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Consider standardizing overflow behavior across columns

The grid has mixed overflow handling:

  • Global show-overflow="tooltip" at the grid level
  • Individual show-overflow without "tooltip" value on the "introduction" column

This might create inconsistent tooltip behavior across columns.

Consider one of these approaches:

  <tiny-grid
    :data="tableData"
    column-min-width="100"
    show-overflow="tooltip"
    :column-anchor="columnAnchor"
    :optimization="{ scrollX: { gt: 20 } }"
  >
    <!-- ... other columns ... -->
-   <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+   <tiny-grid-column field="introduction" title="公司简介"></tiny-grid-column>

Or if different overflow behavior is intended for the introduction column:

-   <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+   <tiny-grid-column field="introduction" title="公司简介" show-overflow="ellipsis"></tiny-grid-column>

Also applies to: 53-53

:column-anchor="columnAnchor"
:optimization="{ scrollX: { gt: 20 } }"
height="auto"
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/grid/large-data/column-anchor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<tiny-grid
:data="tableData"
column-min-width="100"
auto-resize
show-overflow="tooltip"
:column-anchor="columnAnchor"
:optimization="{ scrollX: { gt: 20 } }"
height="auto"
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/grid/large-data/scroll-to-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<tiny-button @click="scrollToColumn">滚动到500列</tiny-button>
</div>
<br />
<tiny-grid ref="tinyGridRef" height="300"> </tiny-grid>
<tiny-grid ref="tinyGridRef" height="300" column-width="100"> </tiny-grid>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider dynamic column width for better responsiveness

While setting a fixed column-width="100" provides consistent sizing, it might not be optimal for all screen sizes and data types. With 1000 columns, this results in a total width of 100,000 pixels, which could impact performance.

Consider these alternatives:

- <tiny-grid ref="tinyGridRef" height="300" column-width="100">
+ <tiny-grid ref="tinyGridRef" height="300" :column-width="getColumnWidth">

Add this method to compute widths based on content or viewport:

const getColumnWidth = (column) => {
  // For demo purposes, use smaller widths for higher column numbers
  const columnIndex = parseInt(column.field.replace('attr', ''))
  return columnIndex > 100 ? 60 : 100
}

</div>
</template>

Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/grid/large-data/scroll-to.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<tiny-button @click="scrollToColumn">滚动到500列</tiny-button>
</div>
<br />
<tiny-grid ref="tinyGrid" height="300"> </tiny-grid>
<tiny-grid ref="tinyGrid" height="300" column-width="100"> </tiny-grid>
</div>
</template>

Expand Down
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/grid/loading/grid-custom-loading-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,14 @@ init()

const loadingComponent = () => (
<div class="custom-loading">
<span>正在加载中。。。</span>
<span>正在加载中...</span>
</div>
)
</script>

<style scoped>
.custom-loading {
font-size: 20px;
font-size: 16px;
width: 100%;
height: 100%;
display: flex;
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/grid/loading/grid-custom-loading.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@ import { test, expect } from '@playwright/test'
test('自定义表格加载', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-loading#loading-grid-custom-loading')
await expect(page.getByText('正在加载中。。。')).toBeVisible()
await expect(page.getByText('正在加载中...')).toBeVisible()
})
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/grid/loading/grid-custom-loading.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export default {
loadingComponent() {
return (
<div class="custom-loading">
<span>正在加载中。。。</span>
<span>正在加载中...</span>
</div>
)
},
Expand Down Expand Up @@ -77,7 +77,7 @@ export default {

<style scoped>
.custom-loading {
font-size: 20px;
font-size: 16px;
width: 100%;
height: 100%;
display: flex;
Expand Down
10 changes: 5 additions & 5 deletions examples/sites/demos/pc/app/grid/operation-column/selection-operation-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,23 +19,23 @@ import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
const toolbarButtons = ref([
{
code: 'clearSelection',
name: '手动取消多选行'
name: '取消多选行'
},
{
code: 'setAllSelection',
name: '手动选中所有行'
name: '选中所有行'
},
{
code: 'setSelection',
name: '手动选中指定行'
name: '选中指定行'
},
{
code: 'toggleAllSelection',
name: '手动切换所有行选中状态'
name: '切换所有行选中状态'
},
{
code: 'toggleRowSelection',
name: '手动切换指定行选中状态'
name: '切换指定行选中状态'
}
])
const tableData = ref([
Expand Down
10 changes: 5 additions & 5 deletions examples/sites/demos/pc/app/grid/operation-column/selection-operation.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,18 @@ import { test, expect } from '@playwright/test'
test('多选项操作', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-operation-column#operation-column-selection-operation')
await page.getByRole('button', { name: '手动选中指定行' }).click()
await page.getByRole('button', { name: '选中指定行' }).click()
await expect(page.locator('.tiny-grid-body__row').nth(4).locator('input')).toBeChecked()
await page.getByRole('button', { name: '手动切换指定行选中状态' }).click()
await page.getByRole('button', { name: '切换指定行选中状态' }).click()
await expect(page.locator('.tiny-grid-body__row').nth(1).locator('input')).toBeChecked()
await page.getByRole('button', { name: '手动切换指定行选中状态' }).click()
await page.getByRole('button', { name: '切换指定行选中状态' }).click()
await expect(page.locator('.tiny-grid-body__row').nth(1).locator('input')).not.toBeChecked()

await page.getByRole('button', { name: '手动选中所有行' }).click()
await page.getByRole('button', { name: '选中所有行' }).click()
for (const check of await page.locator('.tiny-grid-checkbox input').all()) {
await expect(check).toBeChecked()
}
await page.getByRole('button', { name: '手动取消多选行' }).click()
await page.getByRole('button', { name: '取消多选行' }).click()
for (const check of await page.locator('.tiny-grid-checkbox input').all()) {
await expect(check).not.toBeChecked()
}
Expand Down
10 changes: 5 additions & 5 deletions examples/sites/demos/pc/app/grid/operation-column/selection-operation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,23 +26,23 @@ export default {
toolbarButtons: [
{
code: 'clearSelection',
name: '手动取消多选行'
name: '取消多选行'
},
{
code: 'setAllSelection',
name: '手动选中所有行'
name: '选中所有行'
},
{
code: 'setSelection',
name: '手动选中指定行'
name: '选中指定行'
},
{
code: 'toggleAllSelection',
name: '手动切换所有行选中状态'
name: '切换所有行选中状态'
},
{
code: 'toggleRowSelection',
name: '手动切换指定行选中状态'
name: '切换指定行选中状态'
}
],
tableData: [
Expand Down
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/grid/size/fixed-column-width-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<template>
<tiny-grid :data="tableData">
<tiny-grid-column field="name" title="名称" width="150"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域" width="80"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域" width="100"></tiny-grid-column>
<tiny-grid-column field="address" title="地址" width="20%"></tiny-grid-column>
<tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
<tiny-grid-column field="introduction" title="公司简介"></tiny-grid-column>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider adding show-overflow="tooltip" for consistency.

The introduction column contains long text that could overflow. Based on the changes being made across other grid components, consider adding show-overflow="tooltip" to maintain consistency in how overflow content is handled.

-    <tiny-grid-column field="introduction" title="公司简介"></tiny-grid-column>
+    <tiny-grid-column field="introduction" title="公司简介" show-overflow="tooltip"></tiny-grid-column>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<tiny-grid-column field="introduction" title="公司简介"></tiny-grid-column>
<tiny-grid-column field="introduction" title="公司简介" show-overflow="tooltip"></tiny-grid-column>

</tiny-grid>
</template>

Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/grid/size/fixed-column-width.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@ test('列属性设置宽度', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-size#size-fixed-column-width')
await expect(page.getByRole('cell', { name: '名称' }).first()).toHaveCSS('width', '150px')
await expect(page.getByRole('cell', { name: '所属区域' })).toHaveCSS('width', '80px')
await expect(page.getByRole('cell', { name: '所属区域' })).toHaveCSS('width', '100px')
})
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/grid/size/fixed-column-width.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<template>
<tiny-grid :data="tableData">
<tiny-grid-column field="name" title="名称" width="150"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域" width="80"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域" width="100"></tiny-grid-column>
<tiny-grid-column field="address" title="地址" width="20%"></tiny-grid-column>
<tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
<tiny-grid-column field="introduction" title="公司简介"></tiny-grid-column>
</tiny-grid>
Comment on lines 1 to 7
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add show-overflow="tooltip" to TinyGrid for consistent overflow handling.

The introduction column contains long text that will overflow. According to the standardization effort across the codebase, overflow handling should be managed at the grid level using tooltips.

Apply this change to align with the new overflow handling standard:

- <tiny-grid :data="tableData">
+ <tiny-grid :data="tableData" show-overflow="tooltip">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<template>
<tiny-grid :data="tableData">
<tiny-grid-column field="name" title="名称" width="150"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域" width="80"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域" width="100"></tiny-grid-column>
<tiny-grid-column field="address" title="地址" width="20%"></tiny-grid-column>
<tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
<tiny-grid-column field="introduction" title="公司简介"></tiny-grid-column>
</tiny-grid>
<template>
<tiny-grid :data="tableData" show-overflow="tooltip">
<tiny-grid-column field="name" title="名称" width="150"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域" width="100"></tiny-grid-column>
<tiny-grid-column field="address" title="地址" width="20%"></tiny-grid-column>
<tiny-grid-column field="introduction" title="公司简介"></tiny-grid-column>
</tiny-grid>

</template>

Expand Down
2 changes: 1 addition & 1 deletion examples/sites/src/views/layout/layout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,7 +290,7 @@ export default defineComponent({
}

.tiny-input {
margin: 0 10px 12px;
margin: 0 10px 16px;
width: auto;
max-width: unset;
}
Expand Down
2 changes: 0 additions & 2 deletions packages/theme/src/grid/table.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -905,8 +905,6 @@
}

.@{grid-prefix-cls}-body__column {
.DefaultTdPadding();

&.col__actived {
padding: 0 var(--tv-Grid-cell-padding-x);
}
Expand Down
Loading