33ce4d3cf3
* docs: init vxe-table demos * style: fix vxe-table index.scss import error * docs: fix vxe-table style & theme toggle problem * docs: add rest demos * docs: add vxe-table demo desc * fix: add maximumFileSizeToCacheInBytes to fix build error * fix: fix vxe-table set-theme build error * docs: fix vitepress ssr render problem * docs: add some tips for vitepress compatibility
116 lines
2.6 KiB
Vue
116 lines
2.6 KiB
Vue
<script lang="ts" setup>
|
||
import type { UseVbenVxeGrid, VxeGridProps } from '#/adapter/vxe-table';
|
||
|
||
import { inject } from 'vue';
|
||
|
||
import { Button } from 'ant-design-vue';
|
||
|
||
import { type DemoTableApi } from '../mock-api';
|
||
import { MOCK_API_DATA } from '../table-data';
|
||
|
||
interface RowType {
|
||
category: string;
|
||
color: string;
|
||
id: string;
|
||
price: string;
|
||
productName: string;
|
||
releaseDate: string;
|
||
}
|
||
|
||
const useVbenVxeGrid = inject<UseVbenVxeGrid>(
|
||
'useVbenVxeGrid',
|
||
) as UseVbenVxeGrid;
|
||
|
||
// 数据实例
|
||
// const MOCK_TREE_TABLE_DATA = [
|
||
// {
|
||
// date: '2020-08-01',
|
||
// id: 10_000,
|
||
// name: 'Test1',
|
||
// parentId: null,
|
||
// size: 1024,
|
||
// type: 'mp3',
|
||
// },
|
||
// ]
|
||
|
||
const sleep = (time = 1000) => {
|
||
return new Promise((resolve) => {
|
||
setTimeout(() => {
|
||
resolve(true);
|
||
}, time);
|
||
});
|
||
};
|
||
|
||
/**
|
||
* 获取示例表格数据
|
||
*/
|
||
async function getExampleTableApi(params: DemoTableApi.PageFetchParams) {
|
||
return new Promise<{ items: any; total: number }>((resolve) => {
|
||
const { page, pageSize } = params;
|
||
const items = MOCK_API_DATA.slice((page - 1) * pageSize, page * pageSize);
|
||
|
||
sleep(1000).then(() => {
|
||
resolve({
|
||
total: items.length,
|
||
items,
|
||
});
|
||
});
|
||
});
|
||
}
|
||
|
||
const gridOptions: VxeGridProps<RowType> = {
|
||
checkboxConfig: {
|
||
highlight: true,
|
||
labelField: 'name',
|
||
},
|
||
columns: [
|
||
{ title: '序号', type: 'seq', width: 50 },
|
||
{ align: 'left', title: 'Name', type: 'checkbox', width: 100 },
|
||
{ field: 'category', title: 'Category' },
|
||
{ field: 'color', title: 'Color' },
|
||
{ field: 'productName', title: 'Product Name' },
|
||
{ field: 'price', title: 'Price' },
|
||
{ field: 'releaseDate', formatter: 'formatDateTime', title: 'DateTime' },
|
||
],
|
||
exportConfig: {},
|
||
// height: 'auto', // 如果设置为 auto，则必须确保存在父节点且不允许存在相邻元素，否则会出现高度闪动问题
|
||
keepSource: true,
|
||
proxyConfig: {
|
||
ajax: {
|
||
query: async ({ page }) => {
|
||
return await getExampleTableApi({
|
||
page: page.currentPage,
|
||
pageSize: page.pageSize,
|
||
});
|
||
},
|
||
},
|
||
},
|
||
toolbarConfig: {
|
||
custom: true,
|
||
export: true,
|
||
// import: true,
|
||
refresh: true,
|
||
zoom: true,
|
||
},
|
||
};
|
||
|
||
const [Grid, gridApi] = useVbenVxeGrid({
|
||
gridOptions,
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="vp-raw w-full">
|
||
<Grid>
|
||
<template #toolbar-tools>
|
||
<Button class="mr-2" type="primary" @click="() => gridApi.query()">
|
||
刷新当前页面
|
||
</Button>
|
||
<Button type="primary" @click="() => gridApi.reload()">
|
||
刷新并返回第一页
|
||
</Button>
|
||
</template>
|
||
</Grid>
|
||
</div>
|
||
</template>
|