Skip to content

Commit 7284629

Browse files
gimmyhehegimmyhehe
authored
docs(grid): add grid customs doc and demo (#3690)
1 parent 87eb0bc commit 7284629

File tree

6 files changed

+189
-2
lines changed

6 files changed

+189
-2
lines changed

‎examples/sites/demos/apis/grid.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,19 @@ export default {
159159
mode: ['pc', 'mobile-first'],
160160
pcDemo: 'grid-faq#custom-column'
161161
},
162+
{
163+
name: 'customs',
164+
typeAnchorName: 'ICustomConfig',
165+
type: 'ICustomConfig[]',
166+
defaultValue: '',
167+
desc: {
168+
'zh-CN': '表格的初始化个性配置，可以控制表格列是否隐藏，设置列宽。优先级高于grid-column上的配置。',
169+
'en-US':
170+
'Initialize the table personalized configuration to control whether the table columns are hidden and set the column width. It takes precedence over the configuration on grid-column.'
171+
},
172+
mode: ['pc', 'mobile-first'],
173+
pcDemo: 'grid-faq#custom-column'
174+
},
162175
{
163176
name: 'data',
164177
typeAnchorName: 'IRow',
@@ -4212,6 +4225,19 @@ interface ICellClassNameArgs {
42124225
// 单元格所在行的序号
42134226
seq: number
42144227
$seq: string // 已弃用
4228+
}`
4229+
},
4230+
{
4231+
name: 'ICustomConfig',
4232+
type: 'type',
4233+
code: `
4234+
interface ICustomConfig {
4235+
// 表格列字段
4236+
property: string
4237+
// 是否显示
4238+
visible?: boolean
4239+
// 列宽
4240+
width?: number | string
42154241
}`
42164242
}
42174243
]

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

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<template>
2+
<tiny-grid :data="tableData" :resizable="true" :customs="customs">
3+
<template #toolbar>
4+
<tiny-grid-toolbar id="default-customs" :resizable="{ storage: true }" setting></tiny-grid-toolbar>
5+
</template>
6+
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
7+
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
8+
<tiny-grid-column field="address" :resizable="false" title="地址"></tiny-grid-column>
9+
<tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
10+
</tiny-grid>
11+
</template>
12+
13+
<script setup>
14+
import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
15+
import { ref } from 'vue'
16+
17+
const customs = ref([
18+
{ property: 'name', visible: false },
19+
{ property: 'employees', width: 200 }
20+
])
21+
22+
const tableData = ref([
23+
{
24+
id: '1',
25+
name: 'GFD 科技 YX 公司',
26+
address: '福州',
27+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
28+
employees: 800
29+
},
30+
{
31+
id: '2',
32+
name: 'WWW 科技 YX 公司',
33+
address: '深圳福田区',
34+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
35+
employees: 300
36+
},
37+
{
38+
id: '3',
39+
name: 'RFV 有限责任公司',
40+
address: '中山市',
41+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
42+
employees: 1300
43+
},
44+
{
45+
id: '4',
46+
name: 'TGB 科技 YX 公司',
47+
address: '龙岩',
48+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
49+
employees: 360
50+
},
51+
{
52+
id: '5',
53+
name: 'YHN 科技 YX 公司',
54+
address: '韶关',
55+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
56+
employees: 810
57+
},
58+
{
59+
id: '6',
60+
name: 'WSX 科技 YX 公司',
61+
address: '黄冈',
62+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
63+
employees: 800
64+
}
65+
])
66+
</script>

‎examples/sites/demos/pc/app/grid/custom/default-customs.spec.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { test, expect } from '@playwright/test'
2+
3+
test('初始化个性配置', async ({ page }) => {
4+
page.on('pageerror', (exception) => expect(exception).toBeNull())
5+
await page.goto('grid-custom#custom-default-csutoms')
6+
const demo = page.locator('#custom-default-csutoms')
7+
await expect(demo.getByRole('cell', { name: '名称' })).not.toBeVisible()
8+
await expect(page.getByRole('cell', { name: '员工数' })).toBeVisible()
9+
})

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

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<tiny-grid :data="tableData" :resizable="true" :customs="customs">
3+
<template #toolbar>
4+
<tiny-grid-toolbar id="default-customs" :resizable="{ storage: true }" setting></tiny-grid-toolbar>
5+
</template>
6+
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
7+
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
8+
<tiny-grid-column field="address" :resizable="false" title="地址"></tiny-grid-column>
9+
<tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
10+
</tiny-grid>
11+
</template>
12+
13+
<script>
14+
import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
15+
16+
export default {
17+
components: {
18+
TinyGrid,
19+
TinyGridColumn,
20+
TinyGridToolbar
21+
},
22+
data() {
23+
return {
24+
customs: [
25+
{ property: 'name', visible: false },
26+
{ property: 'employees', width: 200 }
27+
],
28+
tableData: [
29+
{
30+
id: '1',
31+
name: 'GFD 科技 YX 公司',
32+
address: '福州',
33+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
34+
employees: 800
35+
},
36+
{
37+
id: '2',
38+
name: 'WWW 科技 YX 公司',
39+
address: '深圳福田区',
40+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
41+
employees: 300
42+
},
43+
{
44+
id: '3',
45+
name: 'RFV 有限责任公司',
46+
address: '中山市',
47+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
48+
employees: 1300
49+
},
50+
{
51+
id: '4',
52+
name: 'TGB 科技 YX 公司',
53+
address: '龙岩',
54+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
55+
employees: 360
56+
},
57+
{
58+
id: '5',
59+
name: 'YHN 科技 YX 公司',
60+
address: '韶关',
61+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
62+
employees: 810
63+
},
64+
{
65+
id: '6',
66+
name: 'WSX 科技 YX 公司',
67+
address: '黄冈',
68+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
69+
employees: 800
70+
}
71+
]
72+
}
73+
}
74+
}
75+
</script>

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,17 @@ export default {
1313
},
1414
codeFiles: ['custom/column-width.vue']
1515
},
16+
{
17+
demoId: 'custom-default-csutoms',
18+
name: { 'zh-CN': '初始化个性配置', 'en-US': 'Initialize personal configuration' },
19+
desc: {
20+
'zh-CN':
21+
'<p>在 <code>grid</code> 标签上配置 <code>customs</code> 可以设置表格的初始化个性配置，可以控制表格列的隐藏，列宽等。</p>\n',
22+
'en-US':
23+
'<p>Configure <code>resizable=&quot;true&quot;</code> on the <code>grid</code> tag to adjust the column width, and configure <code>resizable=&quot;{storage: true}&quot;</code> on the <code>toolbar</code> tag to save the column width in <code>localStorage</code> on the local host. The column width of the table on the refreshed page is displayed based on the column width after being dragged.</p>\n'
24+
},
25+
codeFiles: ['custom/default-customs.vue']
26+
},
1627
{
1728
demoId: 'custom-column-simple',
1829
name: { 'zh-CN': '简化版列设置', 'en-US': 'Manually Reset Columns' },

‎examples/sites/demos/pc/app/grid/webdoc/grid-editor.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default {
77
name: { 'zh-CN': '内置编辑器', 'en-US': 'Grid-editor-built-in editor' },
88
desc: {
99
'zh-CN': `
10-
<p>通过在 <code>grid</code> 标签上配置 <code>edit-config</code>。在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染内置编辑组件， <code>events</code> 配置组件事件。</p>
10+
<p>通过在 <code>grid</code> 标签上配置 <code>edit-config</code>。在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染内置编辑组件，<code>attrs</code>配置组件的属性， <code>events</code> 配置组件事件。</p>
1111
<div class="tip custom-block">
1212
<p class="custom-block-title">特别说明：</p>
1313
<p>内置编辑器只支持 <code>Input</code> 和 <code>Select</code> 组件且均为浏览器原生组件并非 TinyVue 组件，需要使用其他组件可参考自定义编辑器。</p>
@@ -23,7 +23,7 @@ export default {
2323
name: { 'zh-CN': '自定义编辑器', 'en-US': 'Introducing the TINY component as the editor' },
2424
desc: {
2525
'zh-CN': `
26-
<p> <code>grid</code> 标签上配置 <code>edit-config</code>。\n在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染自定义编辑组件或者 TinyVue 提供的组件。</p>
26+
<p> <code>grid</code> 标签上配置 <code>edit-config</code>。\n在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染自定义编辑组件或者 TinyVue 提供的组件。<code>attrs</code>配置组件的属性， <code>events</code> 配置组件事件。</p>
2727
`,
2828
'en-US':
2929
'<p>Introduces the TinyVue <code>Select</code> component through <code>attribute configuration</code>. </p>\n'

0 commit comments

Comments
 (0)