Skip to content
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

fix(grid-slot):Table Example Add Editor Slot #608

Merged
merged 2 commits into from
Oct 23, 2023
Merged

fix(grid-slot):Table Example Add Editor Slot #608

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
ede7e7b
grid表格示例新增编辑器插槽
ianxinnew Oct 20, 2023
5867d5c
grid表格示例新增编辑器插槽
ianxinnew Oct 23, 2023
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
83 changes: 83 additions & 0 deletions examples/sites/demos/pc/app/grid/slot/editor-slot.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<template>
<div>
<tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="插槽自定义列编辑" :editor="{component: 'input', autoselect: true}">
<template #edit="data">
<tiny-input v-model="data.row.name"
placeholder="请输入内容"></tiny-input>
</template>
</tiny-grid-column>
<tiny-grid-column field="employees" title="员工人数"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
<tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
</tiny-grid>
</div>
</template>

<script lang="jsx">
import { Grid, GridColumn, Input } from '@opentiny/vue'

export default {
components: {
TinyGrid: Grid,
TinyGridColumn: GridColumn,
TinyInput: Input
},
data() {
return {
tableData: [
{
id: '1',
name: 'GFD科技YX公司',
area: '华东区',
address: '福州',
employees: 423,
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
},
{
id: '2',
name: 'WWWW科技YX公司',
area: '华南区',
address: '深圳福田区',
employees: 363,
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
},
{
id: '3',
name: 'RFV有限责任公司',
area: '华南区',
address: '中山市',
employees: 131,
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
},
{
id: '4',
name: 'TGBYX公司',
area: '华北区',
address: '梅州',
employees: 215,
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
},
{
id: '5',
name: 'YHN科技YX公司',
area: '华南区',
address: '韶关',
employees: 322,
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
},
{
id: '6',
name: '康康物业YX公司',
area: '华北区',
address: '广州天河区',
employees: 168,
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
}
]
}
}
}
</script>
6 changes: 6 additions & 0 deletions examples/sites/demos/pc/app/grid/webdoc/grid-slot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,12 @@ export default {
'name': { 'zh-CN': '空数据显示插槽', 'en-US': 'Empty data display slot' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
'codeFiles': ['slot/empty-slot.vue']
},
{
'demoId': 'slot-editor-slot',
'name': { 'zh-CN': '编辑器插槽', 'en-US': 'Editor slot' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
'codeFiles': ['slot/editor-slot.vue']
}
],
apis: [{ 'name': 'grid-slot', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
Expand Down