-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2caf94c
commit ced75a1
Showing
28 changed files
with
645 additions
and
146 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,40 +1,140 @@ | ||
| <template> | ||
| <div> | ||
| <vxe-grid v-bind="gridOptions"></vxe-grid> | ||
| <p> | ||
| <vxe-button @click="insertEvent">新增</vxe-button> | ||
| <vxe-button @click="validEvent">快速校验变动数据</vxe-button> | ||
| <vxe-button @click="getInsertEvent">获取新增</vxe-button> | ||
| <vxe-button @click="getRemoveEvent">获取删除</vxe-button> | ||
| <vxe-button @click="getUpdateEvent">获取修改</vxe-button> | ||
| </p> | ||
|
|
||
| <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { reactive } from 'vue' | ||
| const gridOptions = reactive({ | ||
| <script lang="ts" setup> | ||
| import { ref, reactive } from 'vue' | ||
| import { VxeUI } from '../..//../packages' | ||
| import { VxeGridProps, VxeGridInstance } from '../..//../types' | ||
| interface RowVO { | ||
| id: number | ||
| name: string | ||
| role: string | ||
| sex: string | ||
| age: number | ||
| address: string | ||
| } | ||
| const gridRef = ref<VxeGridInstance<RowVO>>() | ||
| const gridOptions = reactive<VxeGridProps<RowVO>>({ | ||
| border: true, | ||
| showOverflow: true, | ||
| height: 600, | ||
| scrollY: { | ||
| enabled: true, | ||
| gt: 0 | ||
| keepSource: true, | ||
| height: 300, | ||
| editConfig: { | ||
| trigger: 'click', | ||
| mode: 'cell', | ||
| showStatus: true | ||
| }, | ||
| editRules: { | ||
| name: [ | ||
| { required: true, message: '请输入名称' }, | ||
| { | ||
| validator ({ cellValue }) { | ||
| // 模拟服务端校验 | ||
| return new Promise((resolve, reject) => { | ||
| setTimeout(() => { | ||
| if (cellValue && (cellValue.length < 3 || cellValue.length > 50)) { | ||
| reject(new Error('名称长度在 3 到 50 个字符之间')) | ||
| } else { | ||
| resolve() | ||
| } | ||
| }, 100) | ||
| }) | ||
| } | ||
| } | ||
| ], | ||
| role: [ | ||
| { | ||
| validator ({ cellValue }) { | ||
| if (cellValue && !['Develop', 'Test', 'Designer', 'PM'].includes(cellValue)) { | ||
| return new Error('角色输入不正确') | ||
| } | ||
| } | ||
| } | ||
| ], | ||
| sex: [ | ||
| { required: true, message: '性别必须填写' }, | ||
| { pattern: /^[0,1]{1}$/, message: '格式不正确' } | ||
| ], | ||
| age: [ | ||
| { pattern: '^[0-9]{0,3}$', message: '格式不正确' } | ||
| ] | ||
| }, | ||
| columns: [ | ||
| { type: 'seq', width: 70 }, | ||
| { field: 'name', title: 'Name' }, | ||
| { field: 'role', title: 'Role' }, | ||
| { field: 'sex', title: 'Sex' } | ||
| { type: 'seq', width: 50 }, | ||
| { field: 'name', title: 'Name', editRender: { name: 'VxeInput' } }, | ||
| { field: 'sex', title: 'Sex', editRender: { name: 'VxeInput' } }, | ||
| { field: 'age', title: 'Age', editRender: { name: 'VxeInput', props: { type: 'integer' } } }, | ||
| { field: 'address', title: 'Address', editRender: { name: 'VxeInput' } } | ||
| ], | ||
| data: [] | ||
| data: [ | ||
| { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, address: 'test abc' }, | ||
| { id: 10002, name: '', role: 'Test', sex: '1', age: 22, address: 'Guangzhou' }, | ||
| { id: 10003, name: 'Test3', role: 'PM', sex: '', age: 32, address: 'Shanghai' }, | ||
| { id: 10004, name: 'Test4', role: 'Designer', sex: '', age: 23, address: 'test abc' }, | ||
| { id: 10005, name: '', role: '', sex: '1', age: 30, address: 'Shanghai' }, | ||
| { id: 10006, name: 'Test6', role: 'Designer', sex: '1', age: 21, address: 'test abc' } | ||
| ] | ||
| }) | ||
| // 模拟行数据 | ||
| const loadList = (size = 200) => { | ||
| const dataList = [] | ||
| for (let i = 0; i < size; i++) { | ||
| dataList.push({ | ||
| id: 10000 + i, | ||
| name: 'Test' + i, | ||
| role: 'Developer', | ||
| sex: '男' | ||
| }) | ||
| const validEvent = async () => { | ||
| const $grid = gridRef.value | ||
| if ($grid) { | ||
| const errMap = await $grid.validate() | ||
| if (errMap) { | ||
| VxeUI.modal.message({ status: 'error', content: '校验不通过！' }) | ||
| } else { | ||
| VxeUI.modal.message({ status: 'success', content: '校验成功！' }) | ||
| } | ||
| } | ||
| } | ||
| const insertEvent = async () => { | ||
| const $grid = gridRef.value | ||
| if ($grid) { | ||
| const { row: newRow } = await $grid.insert({}) | ||
| // 插入一条数据并触发校验 | ||
| const errMap = await $grid.validate(newRow) | ||
| if (errMap) { | ||
| // 校验失败 | ||
| } | ||
| } | ||
| gridOptions.data = dataList | ||
| } | ||
| loadList(500) | ||
| const getInsertEvent = () => { | ||
| const $grid = gridRef.value | ||
| if ($grid) { | ||
| const insertRecords = $grid.getInsertRecords() | ||
| VxeUI.modal.alert(insertRecords.length) | ||
| } | ||
| } | ||
| const getRemoveEvent = () => { | ||
| const $grid = gridRef.value | ||
| if ($grid) { | ||
| const removeRecords = $grid.getRemoveRecords() | ||
| VxeUI.modal.alert(removeRecords.length) | ||
| } | ||
| } | ||
| const getUpdateEvent = () => { | ||
| const $grid = gridRef.value | ||
| if ($grid) { | ||
| const updateRecords = $grid.getUpdateRecords() | ||
| VxeUI.modal.alert(updateRecords.length) | ||
| } | ||
| } | ||
| </script> |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| {"vxe-table":{"attributes":["id","data","height","min-height","max-height","auto-resize","sync-resize","resizable","stripe","border","padding","round","size","loading","align","header-align","footer-align","show-header","highlight-current-row","highlight-hover-row","highlight-current-column","highlight-hover-column","row-class-name","cell-class-name","header-row-class-name","header-cell-class-name","footer-row-class-name","footer-cell-class-name","cell-style","header-cell-style","footer-cell-style","row-style","header-row-style","footer-row-style","show-footer","footer-data","footer-method","merge-cells","merge-footer-items","span-method","footer-span-method","show-overflow","show-header-overflow","show-footer-overflow","column-key","row-key","row-id","keep-source","column-config","cell-config","row-config","resize-config","resizable-config","seq-config","sort-config","filter-config","export-config","import-config","print-config","radio-config","checkbox-config","tooltip-config","expand-config","tree-config","menu-config","clip-config","fnr-config","mouse-config","area-config","keyboard-config","edit-config","valid-config","edit-rules","empty-text","empty-render","loading-config","custom-config","scroll-x","scroll-y","params"],"subtags":["vxe-colgroup","vxe-column"],"description":"基础表格"},"vxe-colgroup":{"attributes":["field","title","width","min-width","resizable","visible","fixed","align","header-align","show-overflow","show-header-overflow","header-class-name"],"subtags":["vxe-column"],"description":"基础表格 - 分组列"},"vxe-column":{"attributes":["type","field","title","width","min-width","resizable","visible","fixed","align","header-align","footer-align","show-overflow","show-header-overflow","show-footer-overflow","class-name","header-class-name","footer-class-name","formatter","sortable","sort-by","sort-type","filters","filter-multiple","filter-method","filter-reset-method","filter-recover-method","filter-render","header-export-method","export-method","footer-export-method","title-help","title-prefix","title-suffix","cell-type","cell-render","edit-render","content-render","tree-node","params","col-id"],"description":"基础表格 - 列"},"vxe-grid":{"attributes":["id","columns","data","height","min-height","max-height","auto-resize","sync-resize","resizable","stripe","border","padding","round","size","loading","align","header-align","footer-align","show-header","highlight-current-row","highlight-hover-row","highlight-current-column","highlight-hover-column","row-class-name","cell-class-name","header-row-class-name","header-cell-class-name","footer-row-class-name","footer-cell-class-name","cell-style","header-cell-style","footer-cell-style","row-style","header-row-style","footer-row-style","show-footer","footer-data","footer-method","merge-cells","merge-footer-items","span-method","footer-span-method","show-overflow","show-header-overflow","show-footer-overflow","column-key","row-key","row-id","keep-source","column-config","cell-config","row-config","resize-config","resizable-config","seq-config","sort-config","filter-config","export-config","import-config","print-config","radio-config","checkbox-config","tooltip-config","expand-config","tree-config","menu-config","clip-config","fnr-config","mouse-config","area-config","keyboard-config","edit-config","valid-config","edit-rules","empty-text","empty-render","loading-config","custom-config","scroll-x","scroll-y","params","form-config","toolbar-config","pager-config","proxy-config","zoom-config","layouts"],"description":"配置式表格"},"vxe-toolbar":{"attributes":["size","loading","class-name","import","export","print","refresh","custom","buttons","tools"],"description":"工具栏"}} | ||
| {"vxe-table":{"attributes":["id","data","height","min-height","max-height","auto-resize","sync-resize","resizable","stripe","border","padding","round","size","loading","align","header-align","footer-align","show-header","highlight-current-row","highlight-hover-row","highlight-current-column","highlight-hover-column","row-class-name","cell-class-name","header-row-class-name","header-cell-class-name","footer-row-class-name","footer-cell-class-name","cell-style","header-cell-style","footer-cell-style","row-style","header-row-style","footer-row-style","show-footer","footer-data","footer-method","merge-cells","merge-footer-items","span-method","footer-span-method","show-overflow","show-header-overflow","show-footer-overflow","column-key","row-key","row-id","keep-source","column-config","cell-config","row-config","resize-config","resizable-config","seq-config","sort-config","drag-config","filter-config","export-config","import-config","print-config","radio-config","checkbox-config","tooltip-config","expand-config","tree-config","menu-config","clip-config","fnr-config","mouse-config","area-config","keyboard-config","edit-config","valid-config","edit-rules","empty-text","empty-render","loading-config","custom-config","scroll-x","scroll-y","params"],"subtags":["vxe-colgroup","vxe-column"],"description":"基础表格"},"vxe-colgroup":{"attributes":["field","title","width","min-width","resizable","visible","fixed","align","header-align","show-overflow","show-header-overflow","header-class-name"],"subtags":["vxe-column"],"description":"基础表格 - 分组列"},"vxe-column":{"attributes":["type","field","title","width","min-width","resizable","visible","fixed","align","header-align","footer-align","show-overflow","show-header-overflow","show-footer-overflow","class-name","header-class-name","footer-class-name","formatter","sortable","sort-by","sort-type","filters","filter-multiple","filter-method","filter-reset-method","filter-recover-method","filter-render","header-export-method","export-method","footer-export-method","title-help","title-prefix","title-suffix","cell-type","cell-render","edit-render","content-render","tree-node","params","col-id"],"description":"基础表格 - 列"},"vxe-grid":{"attributes":["id","columns","data","height","min-height","max-height","auto-resize","sync-resize","resizable","stripe","border","padding","round","size","loading","align","header-align","footer-align","show-header","highlight-current-row","highlight-hover-row","highlight-current-column","highlight-hover-column","row-class-name","cell-class-name","header-row-class-name","header-cell-class-name","footer-row-class-name","footer-cell-class-name","cell-style","header-cell-style","footer-cell-style","row-style","header-row-style","footer-row-style","show-footer","footer-data","footer-method","merge-cells","merge-footer-items","span-method","footer-span-method","show-overflow","show-header-overflow","show-footer-overflow","column-key","row-key","row-id","keep-source","column-config","cell-config","row-config","resize-config","resizable-config","seq-config","sort-config","drag-config","filter-config","export-config","import-config","print-config","radio-config","checkbox-config","tooltip-config","expand-config","tree-config","menu-config","clip-config","fnr-config","mouse-config","area-config","keyboard-config","edit-config","valid-config","edit-rules","empty-text","empty-render","loading-config","custom-config","scroll-x","scroll-y","params","form-config","toolbar-config","pager-config","proxy-config","zoom-config","layouts"],"description":"配置式表格"},"vxe-toolbar":{"attributes":["size","loading","class-name","import","export","print","refresh","custom","buttons","tools"],"description":"工具栏"}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.